Categories
All Softwares
Sublime Text VSCode Binaries Postman TeamViewer Firebase Visual Studio Code Contentful Tribe Circle Notion Datadog NewRelic Vmix Archbee Docker Desktop Bitly GitHub BitBucket Upsource Zapier Make Medium substack Facebook Amazon S3 Maya 3DS MAX Adobe Substance Airtable Roam Research Azure DevOps Retool Powerapps Appsheet 1Password Plex Emby Netflix Apple HomeKit Algolia Lightshot Confluence Toad tableau Data Studio Salesforce SAP Calendly Google photos Bloomberg Terminal BigQuery ML Google AutoML Tables Shopify BigCommerce Google Drive Redis Memcached Windows media player WhatsApp Heroku Render Looker Quizlet Google Analytics Auth0 Trello Elasticsearch Adobe Premiere Pro Zerotier Zoom Skype Docker Polypane Google Chrome Microsoft Edge Safari Gitbook Gmail Google Vertex AI Kdb+ Amplitude Google Docs Typora Roboflow ML Kit Azure Intercom Quicken YNAB Uptime Robot Figma npm TigerGraph Amazon Neptune Fivetran Okta YouTube LastPass Mailchimp Sendinblue Adobe Acrobat Pocket Reddit Onenote Shogun DaVinci Resolve UiPath Taliscale Adobe Lightroom FullStory LogRocket RescueTime Boxcryptor LaunchDarkly ArcGIS AWS SageMaker Tailscale NordVPN WooCommerce Twitter Dropbox Nagios Zabbix Prtg Google Cloud Webflow ActiveCampaign Quickbooks .Net Maui Airplane.dev Pipedream Evernote Autodesk AutoCAD HCL Connections Google Sheets Excel Rundeck Ansible Tower Salt Twilio Pastebin Zoho Unity3D GameMaker AWS Config GCP Cloud Asset inventory AWS GuardDuty Unreal Engine (UE4) Jira YouTrack Stytch Suite CRM Greynoise Photoshop LinkTree BlackBoard Zendesk Discord Rollout.io Disqus Oracle Fusion ERP Cloud Odoo Microsoft Dynamics Alfred Sophos Firewall UniFi Security Gateway Azure AD Doodle Office Online Power BI MicroStrategy Qlik Ampache Socrata Drone CI IOS WordPress IDM FDM Ninja Download Manager McAfee Google Meet WIX cPanel LucidChart HubSpot Landbot Typeform CCleaner Ecwid Spotify Stackstrom N8N Substance Painter Onshape SketchUp Canny Miro XMind Segment GoogleForms Adobe Illustrator MultiSim Proteus Prezi Slack Microsoft Teams SumSub JAWS Wetransfer Framer Microsoft 365 Telegram Threema Signal Lokalise Crowdin Phrase WolframAlpha Dataclay Templater Bot WorkOS FrontEgg Snorkel AI ZohoCRM Voicemod Chromatic Percy POEditor Transifex Microsoft Office Selenium vBulletin Xenforo Hightouch Logseq Bundlephobia Webpack Esbuild Rollup Session Berty WHMCS Stripe Billing Google Camera ImgIX Netlify Google Keep SocialPilot Hootsuite Firebase Analytics Access Manager Wordle Amazon Redshift Snowflake Microsoft Active Directory ClubHouse Tenable Nessus Obsidian Scrivener IDA Neo4j Pushbullet Pushover TinkerCAD Fusion360 SolidWorks TablePlus Cryptomator Glasswire Comodo Firewall Coyim Splunk Hungry Bring Panther IFTTT openHAB Alexa Google Home Twitch Asana IBM Watson Discovery FL Studio Ableton Google Maps Gather Aseprite Instagram Agora Wowza Docuware ELO Office Apollo GraphQL Supabase Hasura Stepzen Postgraphile Lyket.dev Kahoot Clubdesk Fairgate Bandicam Revoltchat Element Imply Pinot MongoDB Oracle Peoplesoft CurseForge Google Tag Manager MS SQL AppWrite Nhost AWS Kendra QnA Maker Apigee Google Cloud IoT Core Microsoft OneNote Amazon API Gateway Qualtrics Sprig Hotjar Sibelius Finale Dorico Snyk Common Room Orbit Toggl Track Adobe Scan Microsoft Lens CamScanner Vercel Stack Overflow Traktor Pro 3 Markup CMS Documentation Atlassian Confluence Raindrop Akeneo Salsify Informatica SuiteCRM VtigerCRM Cruise Tesla autopilot Waymo Adobe Animate Pencil2D Men&Mice Solarwinds Infoblox Device42 AWS WAF
Wundergraph

Wundergraph

Open Source Alternative to Apollo GraphQL, Supabase, Hasura, Stepzen, Postgraphile
Language
TypeScript
Stars
2341
Watchers
2341
Forks
193
Open Issues
2
Last Updated
5/7/2025

REAMDE.md

⚠️ Project Shutdown Notice
This project has been archived and will be made private on Wednesday, April 16, 2025.
We're focusing our efforts on WunderGraph Cosmo, our GraphQL federation platform.
Learn more and join the discussion here.



wunderctl Star us on GitHub PRs welcome License Apache 2 Enterprise support

Quickstart   •   Website   •   Docs   •   Examples   •   Blog

Join our Discord Server Tweet at us on Twitter

Love WunderGraph? Give us a ⭐ on GitHub!

What is WunderGraph?

WunderGraph is a Backend for Frontend (BFF) Framework designed to optimize Developer Workflows through API Composition.

At its core, WunderGraph combines two patterns, API Gateway and BFF with the concept of a package manager, making API composition as simple as npm install. Our mantra is: Compose, don't integrate.

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. This not just eliminates a lot of glue code, but also allows you to reason about the API Dependencies of an application. Do you actually know what APIs and Services your application depends on? WunderGraph can easily answer this question for you, and 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.

WunderGraph in a nutshell

Here's how WunderGraph works:

  1. Compose your APIs
// .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 allows you to create a code pipeline to introspect and compose multiple APIs into a unified API. This makes it easy to update an API dependency without a single click.

  1. Define an Operation

By combining the introspected APIs, WunderGraph generates a unified GraphQL Schema across all APIs. All 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. TypeScript operations allows you to add custom logic e.g aggregating data from multiple APIs, defining custom input validation, etc.

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,
    };
  },
});
  1. Call the Operation from your Frontend

As you define Operations, WunderGraph automatically generates a type-safe client for your Frontend, supporting all major Frontend Frameworks like React, NextJS, Remix, Astro, Svelte, Expo, Vue, etc...

// 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>
  );
}

In the same vein, you could now add Authentication, Authorization, file uploads, etc...

Getting started

The easiest way to get started from scratch is to use the following command:

npx create-wundergraph-app my-project --example nextjs

If you already have an existing project, you can add WunderGraph to it by running:

npx create-wundergraph-app --init

Examples:

We've got a comprehensive list of examples to get you started. The best way to try them out is by cloning the mono-repo.

Advanced Examples:

The WunderGraph Stack

WunderGraph is made up of the three core components:

  • wunderctl: A command line tool to create, deploy and manage your WunderGraph application.
  • SDK: Create, configure & extend your WunderGraph Application with TypeScript.

Core features

  • 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.
  • 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.
  • 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.
  • 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.

Architecture & Key Differentiators

You can learn more about the architecture of WunderGraph and why we’ve built it this way in the architecture section.

How does WunderGraph work

This section provides a high-level overview of how WunderGraph works and its most consumer centric components. For a more thorough introduction, visit the architecture documentation.

After initializing your WunderGraph application, you have a NPM package and a .wundergraph folder. This folder contains the following files:

  • wundergraph.config.ts - The primary config file for your WunderGraph application. Add data-sources and more.
  • wundergraph.operations.ts - Configure authentication, caching and more for a specific or all operations.
  • wundergraph.server.ts - The hooks server to hook into different lifecycle events of your gateway.

As a user of WunderGraph, you add your data-sources and authentication configuration to the wundergraph.config.ts file. You will then define your Operations by creating either a *.graphql or *.ts file in the .wundergraph/operations/ directory. Using GraphQL, you can directly interact with the GraphQL Schema of your data-sources. If you'd like to add more customization, you can also use TypeScript to define custom operations.

All Operations are then compiled into JSON-RPC and served by the WunderGraph Gateway. You 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.

Contributing

Read the CONTRIBUTING.md to learn how to contribute to WunderGraph.

Security

We are thankful for any and all security reports. Please read the SECURITY.md to learn how to report any security concerns to WunderGraph.

Community & Support

  • GitHub Issues. Best for: bugs and errors you encounter using WunderGraph.
  • Email Support. Best for: specific questions around WunderGraph as an early enterprise adopter.
  • Slack Support. Best for: problems with WunderGraph as an enterprise customer.
  • Discord. Best for: sharing your applications and hanging out with the community.
  • Feedback and Feature Requests. Best for: discussing and voting on feature requests and giving feedback to our developers.

Enterprise

We're a small but growing team of API Enthusiasts, thrilled to help you get the best Developer Experience of working with APIs. Our Support Plans are tailored to help your teams get the most out of WunderGraph. We love building close relationships with 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 custom-built features.

Use this Link to contact our sales team for a demo.

Categories:
API Platform