Getting Started With WunderGraph: An API Gateway That Turns GraphQL Into RPC on the Fly

A comprehensive guide to WunderGraph, with a focus on its new TypeScript Operations feature — async resolvers for data fetching, with shared types between Server & Client.

I’ve been using WunderGraph a lot lately for my NextJS projects.

I really dig it. It lets me define all my data sources as dependencies in config — and NOT hardcoded in my app code — which it then introspects into a virtual graph that I can write GraphQL queries to get data out of. Then, WunderGraph turns these operations into simple JSON-over-RPC calls.

It’s the best end-to-end devex you can ask for, but since it can do SO much — introspection and consolidation of multiple disparate data sources, auto-generated typesafe hooks in dev, auth, etc. — it can be a little difficult to grok WunderGraph’s fundamentals.

So I wrote this to ease you into it. It’s a tutorial on how to build an app that uses WunderGraph + NextJS to fetch bands/artists who are based in a given country’s capital.

The full code is over here if you’d like to skip ahead.

We’ll be taking a look at some critical features of WunderGraph, what they do, how to use them, how to deploy projects created with them, and some gotchas to avoid…