wundergraph
Release wunderctl 0.180.0
QuickStart • เว็บไซต์ • เอกสาร • ตัวอย่าง • บล็อก
รัก wundergraph? ให้กับ GitHub!
Wundergraph เป็น กรอบแบ็กเอนด์สำหรับ Frontend (BFF) ที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพเวิร์กโฟลว์ของนักพัฒนาซอฟต์แวร์ผ่านองค์ประกอบ API
ที่แกนกลางของมัน Wundergraph รวมสองรูปแบบคือ API Gateway และ BFF เข้ากับแนวคิดของผู้จัดการแพ็คเกจทำให้องค์ประกอบ API ง่ายเหมือนการติดตั้ง NPM มนต์ของเราคือ: เขียนอย่ารวมเข้าด้วยกัน
องค์ประกอบ API เป็นรูปแบบใหม่ที่ช่วยให้คุณสามารถโต้ตอบกับชุด API ที่แตกต่างกันราวกับว่าพวกเขาเป็น API แบบครบวงจรเดียว สิ่งนี้ไม่เพียง แต่กำจัดรหัสกาวจำนวนมาก แต่ยังช่วยให้คุณมีเหตุผลเกี่ยวกับการพึ่งพา API ของแอปพลิเคชัน คุณรู้หรือไม่ว่า API และบริการของคุณแอปพลิเคชันขึ้นอยู่กับอะไร? Wundergraph สามารถตอบคำถามนี้ให้คุณได้อย่างง่ายดายและยังช่วยให้คุณวิเคราะห์และสังเกตได้ว่าแอปพลิเคชันของคุณใช้ 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 โดยไม่ต้องคลิกเพียงครั้งเดียว
ด้วยการรวม APIs ที่ใคร่ครวญ 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 คุณสามารถโต้ตอบกับ schema graphQL ของแหล่งข้อมูลโดยตรงได้โดยตรง หากคุณต้องการเพิ่มการปรับแต่งเพิ่มเติมคุณยังสามารถใช้ TypeScrip เพื่อกำหนดการดำเนินการที่กำหนดเอง
การดำเนินการทั้งหมดจะถูกรวบรวมลงใน JSON-RPC และให้บริการโดยเกตเวย์ Wundergraph คุณสามารถใช้หนึ่งในไคลเอนต์ประเภทที่สร้างขึ้นได้หรือลองใช้ API โดยใช้ข้อกำหนดของ Postman Collection หรือ OpenAPI ซึ่งจะสร้างขึ้นในไดเรกทอรี. .wundergraph/generated
อ่าน The Inturning.md เพื่อเรียนรู้วิธีการมีส่วนร่วมใน Wundergraph
เราขอขอบคุณสำหรับรายงานความปลอดภัยใด ๆ และทั้งหมด โปรดอ่าน Security.md เพื่อเรียนรู้วิธีการรายงานข้อกังวลด้านความปลอดภัยใด ๆ กับ Wundergraph
เราเป็นทีมเล็ก ๆ ของผู้ที่ชื่นชอบ API ที่กำลังเติบโตตื่นเต้นที่จะช่วยให้คุณได้รับประสบการณ์นักพัฒนาที่ดีที่สุดในการทำงานกับ APIs แผนการสนับสนุนของเราได้รับการปรับแต่งเพื่อช่วยให้ทีมของคุณได้รับประโยชน์สูงสุดจาก Wundergraph เรารักการสร้างความสัมพันธ์ใกล้ชิดกับลูกค้าของเราทำให้เราสามารถปรับปรุงผลิตภัณฑ์อย่างต่อเนื่องและทำซ้ำอย่างรวดเร็ว ทีมขายของเราพร้อมที่จะพูดคุยกับคุณเกี่ยวกับความต้องการโครงการข้อมูลราคาแผนสนับสนุนและคุณสมบัติที่สร้างขึ้นเอง
ใช้ลิงค์นี้เพื่อติดต่อทีมขายของเราเพื่อสาธิต
