wundergraph
Release wunderctl 0.180.0
快速啟動•網站•文檔•示例•博客
愛wundergraph？在github上給我們一個！
WunderGraph是Frontend（BFF）框架的後端，旨在通過API組成優化開發人員工作流。
Wundergraph以其核心將API網關和BFF與包裝管理器的概念相結合，使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中。這使得無需單擊即可更新API依賴性。
通過組合替代的API，WunderGraph在所有API上生成統一的GraphQl模式。我們要做的就是定義一個操作並從我們的前端打電話。您可以創建GraphQl操作或打字稿操作。兩者都是類型的安全。打字稿操作允許您添加自定義邏輯，例如來自多個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，NextJ，Remix，Astro，Astro，Svelte，Svelte，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由三個核心組成部分組成：
您可以了解有關WunderGraph架構的更多信息，以及為什麼我們在“架構”部分中以這種方式構建它。
本節提供了有關WunderGraph的工作原理及其最為中心的組件的高級概述。要進行更全面的介紹，請訪問架構文檔。
初始化WunderGraph應用程序後，您有一個NPM軟件包和.wundergraph文件夾。該文件夾包含以下文件：
wundergraph.config.ts wundergraph應用程序的主要配置文件。添加數據源等等。wundergraph.operations.ts為特定或所有操作配置身份驗證，緩存等。wundergraph.server.ts掛鉤服務器，用於掛接網關的不同生命週期事件。作為WunderGraph的用戶，您可以將數據源和身份驗證配置添加到wundergraph.config.ts文件中。然後，您將通過在.wundergraph/operations/ Directory中創建*.graphql或*.ts文件來定義操作。使用GraphQL，您可以直接與數據源的GraphQL模式進行交互。如果您想添加更多自定義化，也可以使用Typescript來定義自定義操作。
然後將所有操作彙編為JSON-RPC，並由Wundergraph Gateway提供。您可以使用一個生成的類型安全客戶端之一，也可以使用Postman Collection或OpenAPI規範嘗試API，該規範將在.wundergraph/generated目錄中生成。
閱讀貢獻.md，以了解如何為wundergraph做出貢獻。
我們感謝所有安全報告。請閱讀Security.md，以了解如何向WunderGraph報告任何安全問題。
我們是一個小型但不斷發展的API愛好者團隊，很高興能幫助您獲得與API合作的最佳開發人員體驗。我們的支持計劃是為了幫助您的團隊充分利用Wundergraph的量身定制的。我們喜歡與客戶建立密切的關係，使我們能夠不斷改進產品并快速迭代。我們的銷售團隊可以與您討論您的項目需求，定價信息，支持計劃和定制功能。
使用此鏈接與我們的銷售團隊聯繫以進行演示。
