WunderGraph Package Manager for APIs

Access any API through one unified interface. Query the world as if it was one single GraphQL server. Integration. Done.

WunderGraph Architecture Overview

Use the best tools available on the market. Unite them all in one place. Join, stitch and federate data on the edge. Secure and performant.

WunderGraph in 3 steps

1

Add your API dependencies

As WunderGraph treats APIs like packages, the first step is to install some "dependencies" when starting a new project. Let's add a REST API using OpenApi Specification and a GraphQL API via introspection. WunderGraph automatically transforms all the APIs into a single "virtual" GraphQL Schema which we can query in the next step.

/*
add a REST API from an OpenApi Specification
*/
const restApi = introspect.openApi({
source: {
kind: "file",
filePath: "jsonplaceholder.v1.yaml",
}
})
/*
add a GraphQL API using introspection
*/
const countries = introspect.graphql({
url: "https://countries.trevorblades.com/",
source: IntrospectionPolicy.Network,
})
2

Write a GraphQL Query

We're now able to write Queries against all the APIs, you've previously added. Queries can span across multiple DataSources and you're also able to build links between DataSources so that you can join data from multiple APIs in one single Query.

query CountriesAndUsers {
countries { # from the countries GraphQL API
code
name
}
users { # from the json placeholder REST API
id
name
}
}
3

Debug locally - deploy globally

WunderGraph allows you to debug locally with ease.

wunderctl up
curl http://localhost:9991/api/main/operations/CountriesAndUsers

Once you're happy with the results, deploy globally to the edge with one single command.

wunderctl deploy
curl https://yourproject.wundergraph.dev/api/main/operations/CountriesAndUsers

If you'd like to understand what's happening behind the scenes, here's a Sequence Diagram to explain the complete flow.


Although you can, in reality you wouldn't use curl. WunderGraph takes all your configuration and generates a fully typesafe client for you. The client does all the boring parts like authentication, (re-) fetching data and keeping the UI up to date. Integration done!

// NextJS (React) example
const IndexPage = () => {
const {client: {login, logout}, user} = useWunderGraph(); // auto generated
const liveData = useLiveQuery.CountriesAndUsers(); // auto generated
const users = useQuery.CountriesAndUsers(); // auto generated
return (
<div>
// use/show some user info
{user === undefined && "user not logged in!"}
{user !== undefined && `name: ${user.name}, email: ${user.email}`}
// authentication using GitHub
{user === undefined && <button onClick={() => login.github()}>login</button>}
{user !== undefined && <button onClick={() => logout()}>logout</button>}
// regular query
{JSON.stringify(users)}
// live data updates the UI automatically once new data is available
{JSON.stringify(liveData)}
</div>
)
}

Summary & Next Steps

We've combined two APIs (REST + GraphQL) into a virtual GraphQL Schema. We wrote a Query to fetch data from both APIs. We use the generated typesafe client as it's the fastest way to get data into our application. We securely deployed our "application" to the edge.


We could now create more Queries, Mutations and Subscriptions or add more APIs to expand our application.

One minute Quickstart

Run the WunderGraph NextJS demo on your local machine to see it in action.

yarn global add @wundergraph/wunderctl@latest
mkdir wg-demo && cd wg-demo
wunderctl init --template nextjs-starter
yarn && yarn dev

No more manual integration

Define the schema, create a Query. Get a generated client. Integration. Done.

Deploy on git push

We're GitOps first. Deploy on every push. Create staging environments for every PullRequest.

Edge Caching / API CDN

Out of the box Edge Caching for public & private APIs with a simple configuration.

Authentication aware Data Fetching

Define what data users can fetch and stop worrying about login states.

Analytics

Get valuable insights into how your APIs are being used.

Realtime Data Streaming

Turn any API (REST, GraphQL, etc.) into realtime data streams.

Infrastructure as Code

There are no fancy dashboard screenshots because our philosophy is to define all your APIs using Code.

Develop locally - deploy globally

Run a fully featured WunderGraph environment on your local machine. Deploy globally in seconds.

No integration should take longer than one minute

Our Promise: If integrating a service or API takes longer than one minute, we'll work with you and make it a one-liner.

Why you need a package manager for APIs

It feels natural for developers to use package managers to install and share code. You don't manually copy & paste your dependencies, do you?

How comes that we don't apply the same pattern to APIs? We always manually integrate them.

We install multiple SDKs from different vendors. We copy & paste OpenAPI Specifications. We write endless middlewares, adapters, etc. to integrate multiple APIs.

We have market-places for APIs, hubs, developer portals, etc..., but the integration is still tedious manual work.

Learn more about how WunderGraph will change this.

From the blog

Need help or have questions?

Want to see WunderGraph in action and discuss your use-case?