wundergraph
Release wunderctl 0.180.0
QuickStart • Site • Documentos • Exemplos • Blog
Amor WunderGraph? Dê -nos um no Github!
O WunderGraph é uma estrutura de back -end para o front -end (BFF) projetada para otimizar os fluxos de trabalho do desenvolvedor por meio da composição da API.
Na sua essência, o WunderGraph combina dois padrões, API Gateway e BFF com o conceito de gerenciador de pacotes, tornando a composição da API tão simples quanto a instalação do NPM. Nosso mantra é: compor, não se integre .
A composição da API é um novo padrão que permite interagir com um conjunto heterogêneo de APIs como se fossem uma única API unificada. Isso não apenas elimina muito código de cola, mas também permite raciocinar sobre as dependências da API de um aplicativo. Você realmente sabe quais APIs e serviços de que seu aplicativo depende? O WunderGraph pode facilmente responder a essa pergunta para você e até fornece análises e observabilidade sobre quais APIs e pontos de extremidade são usados pelo seu aplicativo e qual a qualidade do serviço que suas dependências da API fornecem.
Aqui está como funciona o 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' ,
} ,
] ,
} ) ;O WunderGraph permite criar um pipeline de código para introspectar e compor várias APIs em uma API unificada. Isso facilita a atualização de uma dependência da API sem um único clique.
Ao combinar as APIs introspecas, o Wundergraph gera um esquema GraphQL unificado em todas as APIs. Tudo o que precisamos fazer é definir uma operação e chamá -la de nosso front -end. Você pode criar uma operação grafql ou uma operação de digitação. Ambos são seguros de tipo. As operações da TypeScript permite adicionar lógica personalizada, por exemplo, agregação de dados de várias APIs, definindo a validação de entrada personalizada, etc.
| GraphQL | TypeScript |
# .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 ,
} ;
} ,
} ) ; |
Ao definir operações, o WunderGraph gera automaticamente um cliente seguro para o seu front-end, apoiando todas as principais estruturas de front-end como React, NextJs, Remix, Astro, Sove, 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 >
) ;
}Na mesma linha, agora você pode adicionar autenticação, autorização, uploads de arquivos, etc ...
A maneira mais fácil de começar do zero é usar o seguinte comando:
npx create-wundergraph-app my-project --example nextjsSe você já possui um projeto existente, poderá adicionar o WunderGraph a ele executando:
npx create-wundergraph-app --initTemos uma lista abrangente de exemplos para você começar. A melhor maneira de experimentá-los é clonando o mono-repro.
Wundergraph é composto pelos três componentes principais:
Você pode aprender mais sobre a arquitetura do Wundergraph e por que a construímos dessa maneira na seção de arquitetura.
Esta seção fornece uma visão geral de alto nível de como funciona o Wundergraph e seus componentes mais centrados no consumidor. Para uma introdução mais completa, visite a documentação da arquitetura.
Depois de inicializar seu aplicativo Wundergraph, você possui um pacote NPM e uma pasta .wundergraph . Esta pasta contém os seguintes arquivos:
wundergraph.config.ts - O arquivo de configuração principal do seu aplicativo Wundergraph. Adicione fontes de dados e muito mais.wundergraph.operations.ts - Configure autenticação, cache e muito mais para uma operações específicas ou todas.wundergraph.server.ts - O servidor Hooks se conecta a diferentes eventos do ciclo de vida do seu gateway. Como usuário do WunderGraph, você adiciona suas fontes de dados e configuração de autenticação ao arquivo wundergraph.config.ts . Você definirá suas operações criando um arquivo *.graphql ou *.ts no .wundergraph/operations/ diretório. Usando o GraphQL, você pode interagir diretamente com o esquema GraphQL de suas fontes de dados. Se você deseja adicionar mais personalização, também pode usar o TypeScript para definir operações personalizadas.
Todas as operações são então compiladas no JSON-RPC e servidas pelo Wundergraph Gateway. Você pode usar um dos clientes com segurança de tipo gerada ou experimentar a API usando a coleção Postman ou a especificação OpenAPI, que será gerada no diretório .wundergraph/generated .
Leia o contribuindo.md para aprender a contribuir com o Wundergraph.
Somos gratos por todos e quaisquer relatórios de segurança. Leia o Security.md para aprender a relatar quaisquer preocupações de segurança ao WunderGraph.
Somos uma equipe pequena, mas crescente de entusiastas da API, emocionada em ajudá -lo a obter a melhor experiência de desenvolvedor de trabalhar com APIs. Nossos planos de suporte são adaptados para ajudar suas equipes a tirar o máximo proveito de wundergraph. Adoramos construir relacionamentos íntimos com nossos clientes, permitindo -nos melhorar continuamente o produto e iterar rapidamente. Nossa equipe de vendas está disponível para conversar com você sobre as necessidades do seu projeto, informações de preços, planos de suporte e recursos personalizados.
Use este link para entrar em contato com nossa equipe de vendas para uma demonstração.
