wundergraph
Release wunderctl 0.180.0
QuickStart • Site Web • Docs • Exemples • Blog
Vous aimez Wundergraph? Donnez-nous un sur github!
Wundergraph est un framework backend for frontend (BFF) conçu pour optimiser les flux de travail des développeurs via la composition de l'API.
À la base, Wundergraph combine deux modèles, API Gateway et BFF avec le concept d'un gestionnaire de packages, ce qui rend la composition d'API aussi simple que l'installation de NPM. Notre mantra est: Composez, n'intégrez pas .
La composition de l'API est un nouveau modèle qui vous permet d'interagir avec un ensemble hétérogène d'API comme s'il s'agissait d'une seule API unifiée. Cela élimine non seulement beaucoup de code de colle, mais vous permet également de raisonner sur les dépendances API d'une application. Savez-vous réellement à quels API et services votre application dépend? Wundergraph peut facilement répondre à cette question pour vous et vous donne même des analyses et une observabilité sur les API et les points de terminaison utilisés par votre application et la qualité de service que vos dépendances API fournissent.
Voici comment fonctionne 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 vous permet de créer un pipeline de code pour introspecter et de composer plusieurs API dans une API unifiée. Cela facilite la mise à jour d'une dépendance API sans un seul clic.
En combinant les API introspectées, Wundergraph génère un schéma GraphQL unifié dans toutes les API. Tout ce que nous avons à faire est de définir une opération et de l'appeler depuis notre frontend. Vous pouvez créer une opération GraphQL ou une opération de typeScript. Les deux sont en sécurité. Les opérations de typeScript vous permettent d'ajouter des données d'agrégation de logique personnalisée à partir de plusieurs API, de définition de la validation d'entrée personnalisée, etc.
| Graphique | Manuscrit |
# .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 ,
} ;
} ,
} ) ; |
Lorsque vous définissez les opérations, Wundergraph génère automatiquement un client de type type pour votre frontend, prenant en charge tous les principaux cadres frontaux comme React, NextJS, Remix, Astro, Svelte, Expo, Vue, etc ...
// 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 >
) ;
}Dans la même veine, vous pouvez désormais ajouter l'authentification, l'autorisation, les téléchargements de fichiers, etc ...
La façon la plus simple de commencer à zéro est d'utiliser la commande suivante:
npx create-wundergraph-app my-project --example nextjsSi vous avez déjà un projet existant, vous pouvez y ajouter Wundergraph en fonctionnant:
npx create-wundergraph-app --initNous avons une liste complète d'exemples pour vous aider à démarrer. La meilleure façon de les essayer est de cloner le mono-repo.
Wundergraph est composé des trois composants de base:
Vous pouvez en savoir plus sur l'architecture de Wundergraph et pourquoi nous l'avons construit de cette façon dans la section d'architecture.
Cette section donne un aperçu de haut niveau du fonctionnement de Wundergraph et de ses composants les plus centrés sur les consommateurs. Pour une introduction plus approfondie, visitez la documentation de l'architecture.
Après avoir initialisé votre application Wundergraph, vous avez un package NPM et un dossier .wundergraph . Ce dossier contient les fichiers suivants:
wundergraph.config.ts - Le fichier de configuration principal de votre application Wundergraph. Ajoutez des sources de données et plus encore.wundergraph.operations.ts - Configurez l'authentification, la mise en cache et plus pour une opération spécifique ou toutes les opérations.wundergraph.server.ts - le serveur de crochets pour s'accrocher à différents événements de cycle de vie de votre passerelle. En tant qu'utilisateur de Wundergraph, vous ajoutez vos sources de données et votre configuration d'authentification au fichier wundergraph.config.ts . Vous définissez ensuite vos opérations en créant un fichier A *.graphql ou *.ts dans le .wundergraph/operations/ répertoire. En utilisant GraphQL, vous pouvez interagir directement avec le schéma GraphQL de vos sources de données. Si vous souhaitez ajouter plus de personnalisation, vous pouvez également utiliser TypeScript pour définir les opérations personnalisées.
Toutes les opérations sont ensuite compilées en JSON-RPC et desservies par la passerelle Wundergraph. Vous pouvez soit utiliser l'un des clients générés de type type, soit essayer l'API à l'aide de la collection Postman ou de la spécification OpenAPI qui sera générée dans le répertoire .wundergraph/generated .
Lisez le contribution.md pour apprendre à contribuer à Wundergraph.
Nous sommes reconnaissants pour tous les rapports de sécurité. Veuillez lire le Security.md pour apprendre à signaler les problèmes de sécurité à Wundergraph.
Nous sommes une équipe petite mais croissante de passionnés d'API, ravis de vous aider à obtenir la meilleure expérience de développeur de travail avec les API. Nos plans d'assistance sont adaptés pour aider vos équipes à tirer le meilleur parti de Wundergraph. Nous aimons établir des relations étroites avec nos clients, nous permettant d'améliorer en permanence le produit et d'itérer rapidement. Notre équipe de vente est disponible pour vous parler des besoins de votre projet, des informations sur les prix, des plans de support et des fonctionnalités sur mesure.
Utilisez ce lien pour contacter notre équipe de vente pour une démo.
