{"id":13406135,"url":"https://github.com/wundergraph/wundergraph","last_synced_at":"2025-04-01T21:11:10.502Z","repository":{"id":37007511,"uuid":"495866218","full_name":"wundergraph/wundergraph","owner":"wundergraph","description":"WunderGraph is a Backend for Frontend Framework to optimize frontend, fullstack and backend developer workflows through API Composition.","archived":false,"fork":false,"pushed_at":"2024-10-28T21:46:03.000Z","size":117464,"stargazers_count":2328,"open_issues_count":1,"forks_count":165,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-03-25T07:18:58.444Z","etag":null,"topics":["api","api-gateway","api-integration","api-management","backend-for-frontend","bff","go","golang","graphql","graphql-api","grpc","microservices","microservices-architecture","nextjs","postgresql","rest","rest-api","restful-api","typescript"],"latest_commit_sha":null,"homepage":"https://wundergraph.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wundergraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-24T14:45:44.000Z","updated_at":"2025-03-24T16:27:33.000Z","dependencies_parsed_at":"2023-09-23T07:48:02.652Z","dependency_job_id":"2cb231ba-5d71-43f1-880c-1c8221694158","html_url":"https://github.com/wundergraph/wundergraph","commit_stats":{"total_commits":1913,"total_committers":72,"mean_commits":"26.569444444444443","dds":0.6821745948771563,"last_synced_commit":"f59516d31bff0263d1909569885d3b4cba9ea4d8"},"previous_names":[],"tags_count":1340,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wundergraph","download_url":"https://codeload.github.com/wundergraph/wundergraph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245414561,"owners_count":20611369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-gateway","api-integration","api-management","backend-for-frontend","bff","go","golang","graphql","graphql-api","grpc","microservices","microservices-architecture","nextjs","postgresql","rest","rest-api","restful-api","typescript"],"created_at":"2024-07-30T19:02:22.090Z","updated_at":"2025-03-25T20:10:58.589Z","avatar_url":"https://github.com/wundergraph.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n![wunderctl](https://img.shields.io/npm/v/@wundergraph/sdk.svg)\n[![Star us on GitHub](https://img.shields.io/github/stars/wundergraph/wundergraph?color=FFD700\u0026label=Stars\u0026logo=Github)](https://github.com/wundergraph/wundergraph)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/wundergraph/wundergraph/blob/main/CONTRIBUTING.md)\n[![License Apache 2](https://img.shields.io/badge/license-Apache%202-blue)](https://github.com/wundergraph/wundergraph/blob/main/LICENSE)\n[![Enterprise support](https://img.shields.io/badge/enterprise-support-indigo.svg)](https://form.typeform.com/to/fuRWxErj?typeform-embed-id=8749569972809419\u0026typeform-embed=popup-blank\u0026typeform-source=wundergraph.com\u0026typeform-medium=embed-sdk\u0026typeform-medium-version=next)\n\n[Quickstart](https://docs.wundergraph.com/getting-started)\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n[Website](https://wundergraph.com/)\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n[Docs](https://docs.wundergraph.com/docs)\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n[Examples](https://docs.wundergraph.com/docs/examples)\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n[Blog](https://wundergraph.com/blog)\n\n[\u003cimg height=\"auto\" src=\"./assets/logo2.png\"\u003e](https://wundergraph.com/)\n\n[![Join our Discord Server](https://img.shields.io/badge/Discord-chat%20with%20us-%235865F2?style=flat\u0026logo=discord\u0026logoColor=%23fff)](https://discord.com/invite/Jjmc8TC)\n[![Tweet at us on Twitter](https://img.shields.io/badge/Twitter-tweet%20at%20us-1da1f2?style=flat\u0026logo=twitter\u0026logoColor=%23fff)](https://twitter.com/wundergraphcom)\n\n[Love WunderGraph? Give us a ⭐ on GitHub!](https://github.com/wundergraph/wundergraph)\n\n\u003c/div\u003e\n\n## What is WunderGraph?\n\nWunderGraph is a **Backend for Frontend (BFF) Framework** designed to optimize Developer Workflows through API Composition.\n\nAt its core, WunderGraph combines two patterns, [API Gateway](https://microservices.io/patterns/apigateway.html) and [BFF](https://samnewman.io/patterns/architectural/bff/)\nwith the concept of a package manager, making API composition as simple as npm install.\nOur mantra is: **Compose, don't integrate**.\n\n**API Composition** is a new pattern that allows you to interact with a heterogeneous set of APIs as if they were a single unified API.\nThis not just eliminates a lot of glue code, but also allows you to reason about the API Dependencies of an application.\nDo you actually know what APIs and Services your application depends on?\nWunderGraph can easily answer this question for you,\nand even gives you analytics and observability into what APIs and Endpoints are used by your application and what the quality of service your API dependencies provide.\n\n## WunderGraph in a nutshell\n\nHere's how WunderGraph works:\n\n1. **Compose your APIs**\n\n```typescript\n// .wundergraph/wundergraph.config.ts\n\nimport { NextJsTemplate } from '@wundergraph/nextjs/dist/template';\n\n// introspect a PostgreSQL database\nconst pg = introspect.postgresql({\n  apiNamespace: 'pg',\n  databaseURL: new EnvironmentVariable('PG_DATABASE_URL'),\n});\n\n// introspect the Stripe API using OpenAPI\nconst stripe = introspect.openApiV2({\n  apiNamespace: 'stripe',\n  source: {\n    kind: 'file',\n    filePath: './stripe.yaml',\n  },\n  headers: (builder) =\u003e builder.addClientRequestHeader('Authorization', `Bearer ${process.env.STRIPE_SECRET_KEY}`),\n});\n\n// introspect the Shopify Storefront API using GraphQL\nconst shopify = introspect.graphql({\n  apiNamespace: 'shopify',\n  url: 'https://my-shop.myshopify.com/api/2021-07/graphql.json',\n  headers: (builder) =\u003e\n    builder.addStaticHeader('X-Shopify-Storefront-Access-Token', new EnvironmentVariable('SHOPIFY_STOREFRONT_TOKEN')),\n});\n\nconfigureWunderGraphApplication({\n  // compose the APIs into a unified WunderGraph API\n  apis: [pg, stripe, shopify],\n\n  // generate type-safe clients for your Frontend\n  codeGenerators: [\n    {\n      templates: [new NextJsTemplate()],\n      path: '../web/components/generated',\n    },\n  ],\n});\n```\n\nWunderGraph allows you to create a code pipeline to introspect and compose multiple APIs into a unified API.\nThis makes it easy to update an API dependency without a single click.\n\n2. **Define an Operation**\n\nBy combining the introspected APIs, WunderGraph generates a unified GraphQL Schema across all APIs.\nAll we have to do is define an Operation and call it from our Frontend. You can create a GraphQL operation or a TypeScript operation. Both are type-safe.\nTypeScript operations allows you to add custom logic e.g aggregating data from multiple APIs, defining custom input validation, etc.\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e GraphQL \u003c/td\u003e \u003ctd\u003e TypeScript\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\n\n```graphql\n# .wundergraph/operations/users/ByID.graphql\nquery ($id: String!) {\n  user: pg_findFirstUser(where: { id: { equals: $id } }) {\n    id\n    email\n    name\n    bio\n  }\n}\n```\n\n\u003c/td\u003e\u003ctd valign=\"top\"\u003e\n\n```typescript\n// .wundergraph/operations/users/CustomByID.ts\nimport { createOperation, z } from '../../generated/wundergraph.factory';\n\nexport default createOperation.query({\n  // Input validation\n  input: z.object({\n    id: z.string(),\n  }),\n  handler: async ({ input }) =\u003e {\n    // Call into your virtual graph, type-safe\n    const { errors, data } = await operations.query({\n      operationName: 'users/ByID',\n      input: {\n        id: input.id,\n      },\n    });\n\n    return {\n      ...data,\n    };\n  },\n});\n```\n\n\u003c/tr\u003e\u003c/table\u003e\n\n3. **Call the Operation** from your Frontend\n\nAs you define Operations, WunderGraph automatically generates a type-safe client for your Frontend,\nsupporting all major Frontend Frameworks like React, NextJS, Remix, Astro, Svelte, Expo, Vue, etc...\n\n```typescript jsx\n// web/pages/profile.ts\n\nimport { useQuery } from '../../components/generated/nextjs';\n\nexport default async function ProfilePage(props) {\n  const { data } = await useQuery({\n    operationName: 'users/CustomByID', // or 'users/ByID'\n    input: {\n      id: props.params.id,\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{data.user.id}\u003c/h1\u003e\n      \u003cp\u003e{data.user.name}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nIn the same vein, you could now add Authentication, Authorization, file uploads, etc...\n\n## Getting started\n\nThe easiest way to get started from scratch is to use the following command:\n\n```shell\nnpx create-wundergraph-app my-project --example nextjs\n```\n\nIf you already have an existing project, you can add WunderGraph to it by running:\n\n```shell\nnpx create-wundergraph-app --init\n```\n\n## Examples:\n\nWe've got a comprehensive list of examples to get you started.\nThe best way to try them out is by cloning the mono-repo.\n\n- [Apollo Federation](examples/apollo-federation)\n- [Astro](examples/astro)\n- [Astro Relay (Experimental)](examples/astro-relay)\n- [Auth0 OpenID Connect Authentication](examples/auth0-oidc-authentication)\n- [Caching](examples/caching)\n- [Cross API Joins](examples/cross-api-joins)\n- [Expo swr](examples/expo-swr)\n- [Expo Relay](examples/expo-relay)\n- [FaunaDB NextJS](examples/faunadb-nextjs)\n- [Fragments](examples/fragments)\n- [Golang Client](examples/golang-client)\n- [Apollo Subscriptions](examples/graphql-apollo-subscriptions)\n- [Hasura Subscriptions](examples/graphql-hasura-subscriptions)\n- [SSE Subscriptions](examples/graphql-sse-subscriptions)\n- [Subscriptions Hooks](examples/graphql-subscriptions-hooks)\n- [WebSocket Subscriptions](examples/graphql-ws-subscriptions)\n- [GraphQL Yoga SSE Subscriptions](examples/graphql-yoga-sse-subscriptions)\n- [Hooks](examples/hooks)\n- [Inject Bearer Token](examples/inject-bearer)\n- [Keycloak OIDC Authentication](examples/keycloak-oidc-authentication)\n- [Learn WUnderGraph](examples/learn-wundergraph)\n- [Migrate from Apollo](examples/migrate-from-apollo)\n- [Next.js](examples/nextjs)\n- [Next.js app directory](examples/nextjs-app-dir)\n- [Next.js file upload](examples/nextjs-file-upload)\n- [Next.js PostgresSQL Prisma](examples/nextjs-postgres-prisma)\n- [Next.js PostgresQL user filters](examples/nextjs-postgres-user-filters)\n- [Next.js React Query](examples/nextjs-react-query)\n- [Next.js Relay](examples/nextjs-relay)\n- [Next.js Todos](examples/nextjs-todos)\n- [Next.js TypeScript Operations](examples/nextjs-typescript-functions)\n- [Next.js Clerk Authentication](examples/nextjs-clerk)\n- [NodeJS TypeScript Client](examples/nodejs-ts-client)\n- [Nuxt Vue Query](examples/nuxt-vue-query)\n- [OpenAPI Mocking](examples/openapi-mocking)\n- [PostgreSQL](examples/postgres)\n- [Role based Access control](examples/rbac)\n- [Remix](examples/remix)\n- [Schema Extension](examples/schema-extension)\n- [Simple Example](examples/simple)\n- [SvelteKit](examples/sveltekit)\n- [Vite SolidJS](examples/vite-solidjs)\n- [Vite Svelte](examples/vite-svelte)\n- [Vite swr](examples/vite-swr)\n- [Vite React Relay](examples/vite-react-relay)\n- [Webhooks](examples/webhooks)\n\n## Advanced Examples:\n\n- [Use Turborepo to speed up builds in monorepos.](https://github.com/wundergraph/cloud-starter-turbo)\n- [Manage multiple WunderGraph Cloud Projects in a single repository](https://github.com/wundergraph/cloud-multi-projects-demo)\n- [Built-in OpenTelemetry instrumentation](examples/open-telemetry)\n\n## The WunderGraph Stack\n\nWunderGraph is made up of the three core components:\n\n- [**wunderctl**](packages/wunderctl): A command line tool to create, deploy and manage your WunderGraph application.\n- [**SDK**](packages/sdk): Create, configure \u0026 extend your WunderGraph Application with TypeScript.\n\n## Core features\n\n- **APIs as Dependencies** - Define which data sources your frontend depends on and WunderGraph handles the rest. Say goodbye to unmaintainable glue-code, focus on **adding real business value**.\n- **Backend for Frontend Architecture** - WunderGraph lives next to your frontend code, but can also be used stand alone as an API Gateway. Whatever you're building, you can always depend on the same **great DX**.\n- **End-to-End-TypeSafety** - Start new projects in minutes with powerful conventions and code generation. WunderGraph generates **instant, typesafe API clients**, including authentication and file uploads.\n- **API Composition with Namespacing** - WunderGraph is the only tool that allows you to **compose multiple APIs** into a single unified API without naming collisions or manual configuration thanks to **API namespacing**.\n\n## Architecture \u0026 Key Differentiators\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./assets/architecture.jpg\" height=\"auto\"/\u003e\n\u003c/div\u003e\n\nYou can learn more about the architecture of WunderGraph and why we’ve built it this way in [the architecture section](docs/architecture.md).\n\n## How does WunderGraph work\n\nThis section provides a high-level overview of how WunderGraph works and its most consumer centric components. For a\nmore thorough introduction, visit the [architecture](docs/architecture.md) documentation.\n\nAfter initializing your WunderGraph application, you have a NPM package and\na `.wundergraph` folder. This folder contains the following files:\n\n- `wundergraph.config.ts` - The primary config file for your WunderGraph application. Add data-sources and more.\n- `wundergraph.operations.ts` - Configure authentication, caching and more for a specific or all operations.\n- `wundergraph.server.ts` - The hooks server to hook into different lifecycle events of your gateway.\n\nAs a user of WunderGraph, you add your data-sources and authentication configuration to the `wundergraph.config.ts` file.\nYou will then define your Operations by creating either a `*.graphql` or `*.ts` file in the `.wundergraph/operations/` directory.\nUsing GraphQL, you can directly interact with the GraphQL Schema of your data-sources.\nIf you'd like to add more customization, you can also use TypeScript to define custom operations.\n\nAll Operations are then compiled into JSON-RPC and served by the WunderGraph Gateway.\nYou can either use one of the generated type-safe clients, or try out the API using the Postman Collection or OpenAPI Specification which will be generated in the `.wundergraph/generated` directory.\n\n## Contributing\n\nRead the [CONTRIBUTING.md](CONTRIBUTING.md) to learn how to contribute to WunderGraph.\n\n## Security\n\nWe are thankful for any and all security reports. Please read the [SECURITY.md](SECURITY.md) to learn how to report any\nsecurity concerns to WunderGraph.\n\n## Community \u0026 Support\n\n- [GitHub Issues](https://github.com/wundergraph/wundergraph/issues). Best for: bugs and errors you encounter using WunderGraph.\n- [Email Support](mailto:info@wundergraph.com). Best for: specific questions around WunderGraph as an early enterprise adopter.\n- [Slack Support](mailto:info@wundergraph.com). Best for: problems with WunderGraph as an enterprise customer.\n- [Discord](https://discord.gg/Jjmc8TC). Best for: sharing your applications and hanging out with the community.\n- [Feedback and Feature Requests](https://wundergraph.canny.io/). Best for: discussing and voting on feature requests and giving feedback to our developers.\n\n## Enterprise\n\nWe're a small but growing team of API Enthusiasts, thrilled to help you get the best Developer Experience of working\nwith APIs. Our Support Plans are tailored to help your teams get the most out of WunderGraph. We love building close relationships\nwith our customers, allowing us to continuously improve the product and iterate fast. Our sales team is available to talk with you about your project needs, pricing information, support plans, and\ncustom-built features.\n\nUse this [Link](https://form.typeform.com/to/fuRWxErj?typeform-embed-id=9220606329610526\u0026typeform-embed=popup-blank\u0026typeform-source=wundergraph.com\u0026typeform-medium=embed-sdk\u0026typeform-medium-version=next)\nto contact our sales team for a demo.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fwundergraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwundergraph%2Fwundergraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fwundergraph/lists"}