wundergraph
Release wunderctl 0.180.0
QuickStart • Webサイト•ドキュメント•例•ブログ
Wundergraphが好きですか？ Githubで私たちに与えてください！
Wundergraphは、API構成を介して開発者ワークフローを最適化するために設計されたFrontEnd（BFF）フレームワークのバックエンドです。
Wundergraphは、そのコアで、APIゲートウェイとBFFの2つのパターンをパッケージマネージャーの概念と組み合わせて、API構成をNPMインストールと同じくらいシンプルにします。私たちのマントラは次のとおりです。作曲、統合しないでください。
API構成は、まるで単一の統合APIであるかのように、不均一なAPIのセットと対話できる新しいパターンです。これにより、多くの接着剤コードが排除されるだけでなく、アプリケーションのAPI依存関係について推論することもできます。アプリケーションがどのようなAPIとサービスが依存しているかを実際に知っていますか？ Wundergraphはこの質問に簡単に答えることができ、アプリケーションで使用されるAPIとエンドポイントの分析と観察性を提供し、API依存関係が提供するサービスの品質を提供します。
Wundergraphの仕組みは次のとおりです。
// .wundergraph/wundergraph.config.ts
import { NextJsTemplate } from '@wundergraph/nextjs/dist/template' ;
// introspect a PostgreSQL database
const pg = introspect . postgresql ( {
apiNamespace : 'pg' ,
databaseURL : new EnvironmentVariable ( 'PG_DATABASE_URL' ) ,
} ) ;
// introspect the Stripe API using OpenAPI
const stripe = introspect . openApiV2 ( {
apiNamespace : 'stripe' ,
source : {
kind : 'file' ,
filePath : './stripe.yaml' ,
} ,
headers : ( builder ) => builder . addClientRequestHeader ( 'Authorization' , `Bearer ${ process . env . STRIPE_SECRET_KEY } ` ) ,
} ) ;
// introspect the Shopify Storefront API using GraphQL
const shopify = introspect . graphql ( {
apiNamespace : 'shopify' ,
url : 'https://my-shop.myshopify.com/api/2021-07/graphql.json' ,
headers : ( builder ) =>
builder . addStaticHeader ( 'X-Shopify-Storefront-Access-Token' , new EnvironmentVariable ( 'SHOPIFY_STOREFRONT_TOKEN' ) ) ,
} ) ;
configureWunderGraphApplication ( {
// compose the APIs into a unified WunderGraph API
apis : [ pg , stripe , shopify ] ,
// generate type-safe clients for your Frontend
codeGenerators : [
{
templates : [ new NextJsTemplate ( ) ] ,
path : '../web/components/generated' ,
} ,
] ,
} ) ;Wundergraphを使用すると、コードパイプラインを作成して内省し、複数のAPIを統一されたAPIに作成できます。これにより、1回のクリックなしでAPI依存関係を簡単に更新できます。
イントロスターンAPIを組み合わせることにより、WundergraphはすべてのAPIで統一されたGraphQLスキーマを生成します。私たちがしなければならないのは、操作を定義し、フロントエンドから呼び出すことです。 GraphQL操作またはTypeScript操作を作成できます。どちらもタイプセーフです。タイプスクリプト操作を使用すると、複数のAPIからの集約データ、カスタム入力検証などのカスタムロジックを追加できます。
| graphql | タイプスクリプト |
# .wundergraph/operations/users/ByID.graphql
query ( $id : String ! ) {
user : pg_findFirstUser ( where : { id : { equals : $id } }) {
id
email
name
bio
}
} | // .wundergraph/operations/users/CustomByID.ts
import { createOperation , z } from '../../generated/wundergraph.factory' ;
export default createOperation . query ( {
// Input validation
input : z . object ( {
id : z . string ( ) ,
} ) ,
handler : async ( { input } ) => {
// Call into your virtual graph, type-safe
const { errors , data } = await operations . query ( {
operationName : 'users/ByID' ,
input : {
id : input . id ,
} ,
} ) ;
return {
... data ,
} ;
} ,
} ) ; |
操作を定義すると、Wundergraphはフロントエンドのタイプセーフクライアントを自動的に生成し、React、NextJS、Remix、Astro、Svelte、Expo、Vueなどのすべての主要なフロントエンドフレームワークをサポートします。
// web/pages/profile.ts
import { useQuery } from '../../components/generated/nextjs' ;
export default async function ProfilePage ( props ) {
const { data } = await useQuery ( {
operationName : 'users/CustomByID' , // or 'users/ByID'
input : {
id : props . params . id ,
} ,
} ) ;
return (
< div >
< h1 > { data . user . id } < / h1>
< p > { data . user . name } < / p>
< / div >
) ;
}同様に、認証、承認、ファイルアップロードなどを追加できるようになりました...
ゼロから始める最も簡単な方法は、次のコマンドを使用することです。
npx create-wundergraph-app my-project --example nextjs既存のプロジェクトをすでに持っている場合は、実行してWundergraphを追加できます。
npx create-wundergraph-app --initあなたを始めるための例の包括的なリストがあります。それらを試してみる最良の方法は、モノレポをクローニングすることです。
Wundergraphは、3つのコアコンポーネントで構成されています。
Wundergraphのアーキテクチャと、なぜアーキテクチャセクションでこのように構築したのかについて詳しく知ることができます。
このセクションでは、Wundergraphがどのように機能するかとその最も消費者中心のコンポーネントの高レベルの概要を説明します。より徹底的な紹介については、アーキテクチャのドキュメントをご覧ください。
Wundergraphアプリケーションを初期化した後、NPMパッケージと.wundergraphフォルダーがあります。このフォルダーには、次のファイルが含まれています。
wundergraph.config.ts wundergraphアプリケーションのプライマリ構成ファイル。データソースなどを追加します。wundergraph.operations.ts特定またはすべての操作に対して、認証、キャッシュなどを構成します。wundergraph.server.tsフックサーバーは、ゲートウェイのさまざまなライフサイクルイベントに接続します。 Wundergraphのユーザーとして、 wundergraph.config.tsファイルにデータソースと認証構成を追加します。次に、 .wundergraph/operations/ directoryでA *.graphqlまたは*.tsファイルのいずれかを作成して、操作を定義します。 GraphQLを使用すると、データソースのGraphQLスキーマと直接対話できます。さらにカスタマイズを追加したい場合は、TypeScriptを使用してカスタム操作を定義することもできます。
その後、すべての操作がJSON-RPCにコンパイルされ、Wundergraph Gatewayが提供されます。生成されたタイプセーフクライアントのいずれかを使用するか、 .wundergraph/generatedディレクトリで生成されるPostman CollectionまたはOpenapi仕様を使用してAPIを試してみることができます。
Wundergraphに貢献する方法を学ぶには、貢献している.mdを読んでください。
すべてのセキュリティレポートに感謝しています。 Security.mdをお読みください。
私たちはAPI愛好家の小規模で成長しているチームであり、APIを操作するという最高の開発者体験を得るのを手伝うことに興奮しています。私たちのサポート計画は、あなたのチームがWundergraphを最大限に活用できるように調整されています。私たちはお客様との密接な関係を構築し、製品を継続的に改善し、速く反復することができるようになりました。当社の営業チームは、プロジェクトのニーズ、価格設定情報、サポートプラン、カスタムビルド機能についてお客様とお話できます。
このリンクを使用して、デモについては営業チームにお問い合わせください。
