wundergraph
Release wunderctl 0.180.0
QuickStart • 웹 사이트 • 문서 • 예 • 블로그
Wundergraph 사랑? Github에 우리에게 줘!
WunderGraph는 API 구성을 통해 개발자 워크 플로우를 최적화하도록 설계된 Frontend (BFF) 프레임 워크의 백엔드 입니다.
WunderGraph는 핵심적으로 API 게이트웨이와 BFF의 두 가지 패턴을 패키지 관리자의 개념과 결합하여 NPM 설치만큼 간단하게 API 구성을 만듭니다. 우리의 진언은 다음과 같습니다. 작곡, 통합하지 마십시오 .
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는 모든 API에 걸쳐 통합 된 GraphQL 스키마를 생성합니다. 우리가해야 할 일은 작업을 정의하고 프론트 엔드에서 호출하는 것입니다. GraphQL 작동 또는 TypeScript 작업을 만들 수 있습니다. 둘 다 타입 안전입니다. TypeScript 작업은 사용자 정의 로직을 추가 할 수 있습니다. 예를 들어 여러 API에서 데이터 집계, 사용자 정의 입력 유효성 검증 등을 추가 할 수 있습니다.
| 그래프 QL | 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는 Frontend 용 타입 안전 클라이언트를 자동으로 생성하여 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 파일에 데이터 소스 및 인증 구성을 추가합니다. 그런 다음 .wundergraph/operations/ Directory에서 a *.graphql 또는 *.ts 파일을 작성하여 작업을 정의합니다. GraphQL을 사용하면 Data-Sources의 GraphQL 스키마와 직접 상호 작용할 수 있습니다. 더 많은 사용자 정의를 추가하려면 TypeScript를 사용하여 사용자 정의 작업을 정의 할 수도 있습니다.
그런 다음 모든 작업을 JSON-RPC로 컴파일하고 WunderGraph 게이트웨이에서 제공합니다. 생성 된 유형-안전 클라이언트 중 하나를 사용하거나 .wundergraph/generated Directory에서 생성 될 Postman Collection 또는 OpenAPI 사양을 사용하여 API를 시험해 볼 수 있습니다.
WunderGraph에 기여하는 방법을 배우려면 Contributing.md를 읽으십시오.
모든 보안 보고서에 감사드립니다. 보안 문제를 WunderGraph에보고하는 방법을 배우려면 Security.md를 읽으십시오.
우리는 작지만 성장하는 API 애호가 팀으로 API와 함께 일할 수있는 최고의 개발자 경험을 얻도록 도와주었습니다. 우리의 지원 계획은 팀이 WunderGraph를 최대한 활용할 수 있도록 조정되었습니다. 우리는 고객과 긴밀한 관계를 구축하여 제품을 지속적으로 개선하고 빠르게 반복 할 수 있습니다. 우리의 영업 팀은 프로젝트 요구, 가격 정보, 지원 계획 및 맞춤형 기능에 대해 귀하와 이야기 할 수 있습니다.
이 링크를 사용하여 데모에 대한 영업 팀에 문의하십시오.
