wundergraph
Release wunderctl 0.180.0
QuickStart • Sitio web • Documentos • Ejemplos • Blog
¿Amor wundegraph? ¡Danos un en Github!
WunderGraph es un marco de backend para Frontend (BFF) diseñado para optimizar los flujos de trabajo del desarrollador a través de la composición de API.
En esencia, WundeGraph combina dos patrones, API Gateway y BFF con el concepto de un administrador de paquetes, lo que hace que la composición de API sea tan simple como la instalación de NPM. Nuestro mantra es: componer, no se integre .
La composición de API es un nuevo patrón que le permite interactuar con un conjunto heterogéneo de API como si fueran una sola API unificada. Esto no solo elimina mucho código de pegamento, sino que también le permite razonar sobre las dependencias API de una aplicación. ¿Sabes realmente de qué API y servicios dependen su aplicación? WundeGraph puede responder fácilmente esta pregunta por usted, e incluso le brinda análisis y observabilidad en qué API y puntos finales utilizan su aplicación y cuál brinda la calidad del servicio que brindan sus dependencias de API.
Así es como funciona WundeGraph:
// .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 le permite crear una tubería de código para introspectar y componer múltiples API en una API unificada. Esto facilita la actualización de una dependencia de la API sin un solo clic.
Al combinar las API introspectadas, WundeGraph genera un esquema GRAPHQL unificado en todas las API. Todo lo que tenemos que hacer es definir una operación y llamarla desde nuestro interfaz. Puede crear una operación GraphQL o una operación de TypeScript. Ambos son de tipo seguro. Las operaciones de TypeScript le permiten agregar lógica personalizada, por ejemplo, datos de agregación de múltiples API, definiendo la validación de entrada personalizada, etc.
| Gráfico | Mecanografiado |
# .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 ,
} ;
} ,
} ) ; |
A medida que define las operaciones, WundeGraph genera automáticamente un cliente de tipo seguro para su frontend, lo que respalda todos los principales marcos de frontend como 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 >
) ;
}En la misma línea, ahora puede agregar autenticación, autorización, cargas de archivos, etc.
La forma más fácil de comenzar desde cero es usar el siguiente comando:
npx create-wundergraph-app my-project --example nextjsSi ya tiene un proyecto existente, puede agregarle WunderGraph ejecutando:
npx create-wundergraph-app --initTenemos una lista completa de ejemplos para comenzar. La mejor manera de probarlos es clonando el mono-repo.
Wundergraph está compuesto por los tres componentes centrales:
Puede obtener más información sobre la arquitectura de WundeGraph y por qué la hemos construido de esta manera en la sección de arquitectura.
Esta sección proporciona una descripción general de alto nivel de cómo funciona WundeGraph y sus componentes centrados en el consumidor. Para una introducción más exhaustiva, visite la documentación de la arquitectura.
Después de inicializar su aplicación WundeGraph, tiene un paquete NPM y una carpeta .wundergraph . Esta carpeta contiene los siguientes archivos:
wundergraph.config.ts : el archivo de configuración principal para su aplicación Wundergraph. Agregue fuentes de datos y más.wundergraph.operations.ts - Configure la autenticación, el almacenamiento en caché y más para una operación específica o todas.wundergraph.server.ts : el servidor de gancho para conectarse a diferentes eventos del ciclo de vida de su puerta de enlace. Como usuario de WunderGraph, agrega sus fuentes de datos y configuración de autenticación al archivo wundergraph.config.ts . Luego definirá sus operaciones creando un archivo *.graphql o *.ts en el directorio .wundergraph/operations/ . Usando GraphQL, puede interactuar directamente con el esquema GraphQL de sus fuentes de datos. Si desea agregar más personalización, también puede usar TypeScript para definir operaciones personalizadas.
Todas las operaciones se compilan en JSON-RPC y atienden la puerta de enlace de WundeGraph. Puede usar uno de los clientes de tipo seguro generado o probar la API utilizando la colección Postman o la especificación de OpenAPI que se generará en el directorio .wundergraph/generated .
Lea el contribuyente.md para aprender a contribuir a WundeGraph.
Estamos agradecidos por todos y cada uno de los informes de seguridad. Lea el Security.md para aprender cómo informar cualquier inquietud de seguridad a Wundergraph.
Somos un equipo pequeño pero creciente de entusiastas de las API, encantados de ayudarlo a obtener la mejor experiencia de desarrollador de trabajar con API. Nuestros planes de soporte se adaptan para ayudar a sus equipos a aprovechar al máximo el WundeGraph. Nos encanta construir relaciones cercanas con nuestros clientes, lo que nos permite mejorar continuamente el producto e iterar rápidamente. Nuestro equipo de ventas está disponible para hablar con usted sobre las necesidades de su proyecto, la información de precios, los planes de soporte y las funciones personalizadas.
Use este enlace para comunicarse con nuestro equipo de ventas para una demostración.
