Skip to Content

WunderGraph explained in one sequence diagram

Let's assume, you've created an application using the following two APIs:

const restApi = introspect.openApi({
source: {
kind: "file",
filePath: "jsonplaceholder.v1.yaml",
}
})
const countries = introspect.graphql({
url: "https://countries.trevorblades.com/",
source: IntrospectionPolicy.Network,
})

Then you've added the following Operation:

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

This is the resulting Sequence Diagram to fetch the data from Both APIs and return it to the client as if both APIs were a single unified API.

As you can see, even though we're talking to multiple APIs, we just write a single GraphQL Query to fetch all the data we need.

Combine this with the generated client and your application is almost complete. We shift the focus away from complex integration tasks so that developers can focus on building amazing user experiences.