wundergraph
Release wunderctl 0.180.0
QuickStart • موقع الويب • المستندات • أمثلة • بلوق
أحب wundergraph؟ تعطينا على جيثب!
Wundergraph هو إطار خلفي للواجهة الأمامية (BFF) مصمم لتحسين مهام سير عمل المطورين من خلال تكوين API.
في جوهرها ، يجمع Wundergraph بين نمطين ، API Gateway و BFF ومفهوم مدير الحزمة ، مما يجعل تكوين API بسيطًا مثل تثبيت NPM. شعارنا هو: تأليف ، لا تدمج .
تكوين 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 دون نقرة واحدة.
من خلال الجمع بين واجهات برمجة التطبيقات المتخلفة ، يولد Wundergraph مخطط GraphQL موحد عبر جميع واجهات برمجة التطبيقات. كل ما يتعين علينا فعله هو تحديد العملية والاتصال بها من الواجهة الأمامية. يمكنك إنشاء عملية GraphQL أو عملية TypeScript. كلاهما آمن من النوع. تتيح لك عمليات TypeScript إضافة منطق مخصص على سبيل المثال البيانات من واجهات برمجة التطبيقات المتعددة ، وتحديد التحقق من صحة الإدخال المخصص ، إلخ.
| 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 ,
} ;
} ,
} ) ; |
أثناء تحديد العمليات ، تقوم 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 - خادم الخطافات لربط أحداث دورة حياة مختلفة في بوابةك. كمستخدم لـ Wundergraph ، يمكنك إضافة مصادر البيانات وتكوين المصادقة إلى ملف wundergraph.config.ts . ستقوم بعد ذلك بتحديد عملياتك عن طريق إنشاء ملف *.graphql أو *.ts في .wundergraph/operations/ Directory. باستخدام GraphQL ، يمكنك التفاعل مباشرة مع مخطط GraphQL لمصادر البيانات الخاصة بك. إذا كنت ترغب في إضافة المزيد من التخصيص ، فيمكنك أيضًا استخدام TypeScript لتحديد العمليات المخصصة.
ثم يتم تجميع جميع العمليات في JSON-RPC وتخدمها بوابة Wundergraph. يمكنك إما استخدام أحد العملاء الآمنين التي تم إنشاؤها ، أو تجربة واجهة برمجة التطبيقات (API) باستخدام مجموعة Postman أو مواصفات OpenAPI التي سيتم إنشاؤها في الدليل. .wundergraph/generated .
اقرأ المساهمة.
نحن ممتنون لأي وجميع التقارير الأمنية. يرجى قراءة Security.md لمعرفة كيفية الإبلاغ عن أي مخاوف أمنية لـ Wundergraph.
نحن فريق صغير ولكن متزايد من عشاق API ، بسعادة غامرة لمساعدتك في الحصول على أفضل تجربة مطور في العمل مع واجهات برمجة التطبيقات. تم تصميم خطط الدعم لدينا لمساعدة فرقك على الحصول على أقصى استفادة من Wundergraph. نحن نحب بناء علاقات وثيقة مع عملائنا ، مما يسمح لنا بتحسين المنتج بشكل مستمر والتكرار بسرعة. يتوفر فريق المبيعات الخاص بنا للتحدث معك حول احتياجات مشروعك ومعلومات التسعير وخطط الدعم والميزات المصممة خصيصًا.
استخدم هذا الرابط للاتصال بفريق المبيعات الخاص بنا للحصول على عرض تجريبي.
