wundergraph
Release wunderctl 0.180.0
QuickStart • Website • Dokumente • Beispiele • Blog
Liebe Wundergraph? Gib uns ein auf GitHub!
WunderGraph ist ein Backend für Frontend (BFF) Framework, mit dem Entwickler -Workflows durch API -Zusammensetzung optimiert werden sollen.
In seinem Kern kombiniert Wundergraph zwei Muster, API Gateway und BFF mit dem Konzept eines Paketmanagers, wodurch die API -Komposition so einfach ist wie die NPM -Installation. Unser Mantra ist: komponieren, nicht integrieren .
Die API -Zusammensetzung ist ein neues Muster, mit dem Sie mit einem heterogenen API -Satz interagieren können, als ob sie eine einzelne einheitliche API wären. Dies beseitigt nicht nur viel Klebercode, sondern ermöglicht es Ihnen auch, über die API -Abhängigkeiten einer Anwendung zu argumentieren. Wissen Sie tatsächlich, von welchen APIs und Diensten Ihre Bewerbung abhängt? WunderGraph kann diese Frage problemlos für Sie beantworten und gibt Ihnen sogar Analysen und Beobachtbarkeit darüber, welche APIs und Endpunkte von Ihrer Anwendung verwendet werden und wie die Servicequalität Ihre API -Abhängigkeiten bieten.
So funktioniert 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' ,
} ,
] ,
} ) ;Mit WunderGraph können Sie eine Codepipeline erstellen, um mehrere APIs in eine einheitliche API zu verfassen. Dies erleichtert einfach, eine API -Abhängigkeit ohne einzelne Klick zu aktualisieren.
Durch die Kombination der eingeweihten APIs erzeugt Wundergraph ein einheitliches GraphQL -Schema für alle APIs. Wir müssen nur eine Operation definieren und sie von unserem Frontend anrufen. Sie können eine GraphQL -Operation oder einen Typenkriptoperation erstellen. Beide sind Typ-Safe. Mit TypeScript -Vorgängen können Sie benutzerdefinierte logische EG -Aggregatdaten aus mehreren APIs hinzufügen, benutzerdefinierte Eingabevalidierung definieren usw.
| Graphql | Typoskript |
# .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 ,
} ;
} ,
} ) ; |
Wenn Sie Vorgänge definieren, generiert Wundergraph automatisch einen Typ-Safe-Client für Ihren Frontend und unterstützt alle wichtigen Frontend-Frontends wie React, NextJs, Remix, Astro, Sufle, Expo, Vue usw.
// 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 >
) ;
}In gleicher Weise können Sie jetzt Authentifizierung, Autorisierung, Datei -Uploads usw. hinzufügen ...
Der einfachste Weg, um von vorne zu beginnen, besteht darin, den folgenden Befehl zu verwenden:
npx create-wundergraph-app my-project --example nextjsWenn Sie bereits ein vorhandenes Projekt haben, können Sie Wundergraph zu ihm hinzufügen, indem Sie ausgeführt werden:
npx create-wundergraph-app --initWir haben eine umfassende Liste von Beispielen, um Ihnen den Einstieg zu erleichtern. Der beste Weg, sie auszuprobieren, ist das Klonen des Mono-Repo.
Wundergraph besteht aus den drei Kernkomponenten:
Sie können mehr über die Architektur von Wundergraph erfahren und warum wir sie im Bereich der Architektur so aufgebaut haben.
Dieser Abschnitt bietet einen hochrangigen Überblick darüber, wie WunderGraph funktioniert und seine am häufigsten zentralen Komponenten. Eine gründlichere Einführung finden Sie in der Architektur -Dokumentation.
Nach der Initialisierung Ihrer Wundergraph -Anwendung haben Sie ein NPM -Paket und einen .wundergraph -Ordner. Dieser Ordner enthält die folgenden Dateien:
wundergraph.config.ts - Die primäre Konfigurationsdatei für Ihre Wundergraph -Anwendung. Fügen Sie Datenquellen und mehr hinzu.wundergraph.operations.ts - Authentifizierung, Caching und mehr für einen bestimmten oder alle Vorgänge konfigurieren.wundergraph.server.ts - Der Hooks -Server, der sich in verschiedene Lebenszyklusereignisse Ihres Gateways einbindet. Als Benutzer von WunderGraph fügen Sie Ihre Datenquellen und Authentifizierungskonfiguration zur Datei wundergraph.config.ts hinzu. Sie definieren Ihre Operationen dann, indem Sie entweder eine *.graphql oder *.ts -Datei im .wundergraph/operations/ im Verzeichnis erstellen. Mit GraphQL können Sie direkt mit dem GraphQL-Schema Ihrer Datenquellen interagieren. Wenn Sie mehr Anpassung hinzufügen möchten, können Sie auch TypeScript verwenden, um benutzerdefinierte Vorgänge zu definieren.
Alle Operationen werden dann in JSON-RPC zusammengestellt und vom Wundergraph Gateway bedient. Sie können entweder einen der generierten Typ-Safe-Clients verwenden oder die API mit der Postman Collection oder der OpenAPI-Spezifikation ausprobieren, die im Verzeichnis .wundergraph/generated generiert wird.
Lesen Sie die beitragen.md, um zu lernen, wie man zu Wundergraph beiträgt.
Wir sind dankbar für alle Sicherheitsberichte. Bitte lesen Sie die Sicherheit von Security.md, um zu erfahren, wie Sie WunderGraph alle Sicherheitsbedenken melden.
Wir sind ein kleines, aber wachsendes Team von API -Enthusiasten und sind begeistert, dass Sie die beste Entwicklererfahrung bei der Arbeit mit APIs machen können. Unsere Supportpläne sind auf Ihre Teams zugeschnitten, um das Beste aus Wundergraph herauszuholen. Wir lieben es, enge Beziehungen zu unseren Kunden aufzubauen, damit wir das Produkt kontinuierlich verbessern und schnell wiederholen können. Unser Verkaufsteam steht zur Verfügung, um mit Ihnen über Ihre Projektanforderungen, Preisinformationen, Supportpläne und maßgeschneiderte Funktionen zu sprechen.
Verwenden Sie diesen Link, um unser Verkaufsteam für eine Demo zu kontaktieren.
