wundergraph
Release wunderctl 0.180.0
QuickStart • Веб -сайт • Документы • Примеры • Блог
Любите Wundergraph? Дайте нам на GitHub!
Wundergraph - это бэкэнд для фронтальной (BFF), предназначенной для оптимизации рабочих процессов разработчика с помощью композиции API.
По своей сути Wundergraph объединяет два шаблона, API Gateway и 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 генерирует единую схему GraphQL по всем API. Все, что нам нужно сделать, это определить операцию и назвать ее с нашего фронта. Вы можете создать операцию GraphQL или операцию TypeScript. Оба являются типовыми безопасными. Операции TypeScript позволяют добавлять пользовательские логические агрегирующие данные из нескольких 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, NextJS, Remix, Astro, 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 - сервер Hooks, чтобы зацепить различные события жизненного цикла вашего шлюза. Как пользователь Wundergraph, вы добавляете свои данные данных и конфигурацию аутентификации в файл wundergraph.config.ts . Затем вы определите свои операции, создав файл *.graphql или *.ts в каталоге .wundergraph/operations/ . Используя GraphQL, вы можете напрямую взаимодействовать со схемой GraphQL ваших источников данных. Если вы хотите добавить больше настройки, вы также можете использовать TypeScript для определения пользовательских операций.
Все операции затем собираются в JSON-RPC и обслуживаются воротами Wundergraph. Вы можете использовать одного из сгенерированных клиентов, безопасных для типа, либо попробовать API, используя Sopman Collection или Specification, которые будут генерироваться в каталоге .wundergraph/generated .
Прочитайте Appling.md, чтобы узнать, как внести свой вклад в Wundergraph.
Мы благодарны за любые отчеты о безопасности. Пожалуйста, прочитайте Security.md, чтобы узнать, как сообщить о любых проблемах безопасности в Wundergraph.
Мы маленькая, но растущая команда энтузиастов API, взволнованные, чтобы помочь вам получить лучший опыт работы с разработчиком с API. Наши планы поддержки адаптированы, чтобы помочь вашим командам получить максимальную отдачу от Wundergraph. Мы любим строить тесные отношения с нашими клиентами, позволяя нам постоянно улучшать продукт и быстро итерацию. Наша команда по продажам можно поговорить с вами о потребностях вашего проекта, информации о ценах, планах поддержки и пользовательских функциях.
Используйте эту ссылку, чтобы связаться с нашей командой по продажам для демонстрации.
