wundergraph
Release wunderctl 0.180.0
QuickStart • Situs Web • Dokumen • Contoh • Blog
Love Wundergraph? Beri kami A di GitHub!
WunderGraph adalah kerangka backend untuk frontend (BFF) yang dirancang untuk mengoptimalkan alur kerja pengembang melalui komposisi API.
Pada intinya, Wundergraph menggabungkan dua pola, API Gateway dan BFF dengan konsep manajer paket, membuat komposisi API sesederhana pemasangan NPM. Mantra kami adalah: Tuliskan, jangan berintegrasi .
Komposisi API adalah pola baru yang memungkinkan Anda untuk berinteraksi dengan set API yang heterogen seolah -olah mereka adalah API terpadu tunggal. Ini tidak hanya menghilangkan banyak kode lem, tetapi juga memungkinkan Anda untuk beralasan tentang dependensi API suatu aplikasi. Apakah Anda benar -benar tahu apa yang bergantung pada API dan layanan aplikasi Anda? Wundergraph dapat dengan mudah menjawab pertanyaan ini untuk Anda, dan bahkan memberi Anda analitik dan observabilitas ke dalam apa API dan titik akhir yang digunakan oleh aplikasi Anda dan kualitas layanan yang diberikan oleh dependensi API Anda.
Begini cara kerja 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 memungkinkan Anda membuat pipa kode untuk mengintrospeksi dan menyusun beberapa API menjadi API terpadu. Ini membuatnya mudah untuk memperbarui ketergantungan API tanpa satu klik.
Dengan menggabungkan API introspected, Wundergraph menghasilkan skema graphQL terpadu di semua API. Yang harus kami lakukan adalah mendefinisikan operasi dan menyebutnya dari frontend kami. Anda dapat membuat operasi GraphQL atau operasi TypeScript. Keduanya jenis-aman. Operasi TypeScript memungkinkan Anda untuk menambahkan logika kustom EG menggabungkan data dari beberapa API, mendefinisikan validasi input khusus, dll.
| Graphql | Naskah |
# .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 ,
} ;
} ,
} ) ; |
Saat Anda mendefinisikan operasi, WunderGraph secara otomatis menghasilkan klien yang aman untuk jenis untuk frontend Anda, mendukung semua kerangka kerja frontend utama seperti React, NextJs, Remix, Astro, Svelte, Expo, Vue, dll ...
// 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 >
) ;
}Dalam nada yang sama, Anda sekarang dapat menambahkan otentikasi, otorisasi, unggahan file, dll ...
Cara termudah untuk memulai dari awal adalah dengan menggunakan perintah berikut:
npx create-wundergraph-app my-project --example nextjsJika Anda sudah memiliki proyek yang sudah ada, Anda dapat menambahkan Wundergraph dengan menjalankan:
npx create-wundergraph-app --initKami memiliki daftar contoh yang komprehensif untuk Anda mulai. Cara terbaik untuk mencobanya adalah dengan mengkloning mono-repo.
Wundergraph terdiri dari tiga komponen inti:
Anda dapat mempelajari lebih lanjut tentang arsitektur Wundergraph dan mengapa kami membangunnya dengan cara ini di bagian arsitektur.
Bagian ini memberikan gambaran tingkat tinggi tentang cara kerja Wundergraph dan komponen sentris yang paling konsumen. Untuk pengantar yang lebih menyeluruh, kunjungi dokumentasi arsitektur.
Setelah menginisialisasi aplikasi Wundergraph Anda, Anda memiliki paket NPM dan folder .wundergraph . Folder ini berisi file -file berikut:
wundergraph.config.ts - File konfigurasi utama untuk aplikasi Wundergraph Anda. Tambahkan sumber data dan banyak lagi.wundergraph.operations.ts - Konfigurasikan otentikasi, caching dan lebih banyak untuk operasi spesifik atau semua.wundergraph.server.ts - server hooks untuk menghubungkan ke berbagai peristiwa siklus hidup gateway Anda. Sebagai pengguna Wundergraph, Anda menambahkan sumber data dan konfigurasi otentikasi Anda ke file wundergraph.config.ts . Anda kemudian akan mendefinisikan operasi Anda dengan membuat file *.graphql atau *.ts di .wundergraph/operations/ direktori. Menggunakan GraphQL, Anda dapat secara langsung berinteraksi dengan skema graphQL dari sumber data Anda. Jika Anda ingin menambahkan lebih banyak kustomisasi, Anda juga dapat menggunakan TypeScript untuk menentukan operasi khusus.
Semua operasi kemudian dikompilasi ke dalam JSON-RPC dan dilayani oleh Wundergraph Gateway. Anda dapat menggunakan salah satu klien jenis-aman yang dihasilkan, atau mencoba API menggunakan koleksi postman atau spesifikasi OpenAPI yang akan dihasilkan di direktori .wundergraph/generated .
Baca Contributing.MD untuk mempelajari cara berkontribusi pada Wundergraph.
Kami berterima kasih atas semua dan semua laporan keamanan. Harap baca The Security.md untuk mempelajari cara melaporkan masalah keamanan ke Wundergraph.
Kami adalah tim penggemar API yang kecil namun berkembang, senang membantu Anda mendapatkan pengalaman pengembang terbaik bekerja dengan API. Rencana dukungan kami dirancang untuk membantu tim Anda mendapatkan hasil maksimal dari Wundergraph. Kami senang membangun hubungan dekat dengan pelanggan kami, memungkinkan kami untuk terus meningkatkan produk dan mengulangi dengan cepat. Tim penjualan kami tersedia untuk berbicara dengan Anda tentang kebutuhan proyek Anda, informasi harga, paket dukungan, dan fitur yang dibuat khusus.
Gunakan tautan ini untuk menghubungi tim penjualan kami untuk demo.
