WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application
This repository demonstrates how to combine multiple APIs into one unified API and exposing it as a secure JSON API without losing on developer experience.
We're combining the following services:
- 4 Apollo GraphQL SubGraphs (Accounts, Inventory, Products, Reviews) combined as a SuperGraph
- 1 REST API (JSON Placeholder)
- 1 standalone GraphQL API (Trevorblades Countries GraphQL API)
- 1 Mock REST API
All 7 APIs are combined into one unified GraphQL API and securely exposed using JSON RPC.
This example shows how to use Apollo Federation with Subscriptions, a unique feature to WunderGraph. WunderGraph is the only GraphQL Gateway that supports this feature.
Additionally, this example also shows Live Queries. By using server-side Polling, we're able to turn any API into a realtime stream.
Read the docs: https://wundergraph.com/docs
If you have Questions, join our Discord: https://wundergraph.com/discord
npm install && npm start
Open your browser and go to http://localhost:3000
.
Have a look at ./wundergraph/wundergraph.config.ts
.
The following code-snipped introspects the different APIs and merges them all together.
const jsonPlaceholder = introspect.openApi({
apiNamespace: "jsp",
source: {
kind: "file",
filePath: "jsonplaceholder.v1.yaml",
},
})
const weather = introspect.graphql({
apiNamespace: "weather",
url: "https://graphql-weather-api.herokuapp.com/",
});
const federatedApi = introspect.federation({
apiNamespace: "federated",
upstreams: [
{
url: "http://localhost:4001/graphql"
},
{
url: "http://localhost:4002/graphql"
},
{
url: "http://localhost:4003/graphql"
},
{
url: "http://localhost:4004/graphql",
},
]
});
const countries = introspect.graphql({
apiNamespace: "countries",
url: "https://countries.trevorblades.com/",
})
const myApplication = new Application({
name: "api",
apis: [
federatedApi,
countries,
jsonPlaceholder,
weather,
],
});
Once everything is merged, and the configuration is built, the WunderGraph engine is able to delegate all Requests tox the correct upstream(s).
By applying namespaces to each individual API, we're able to avoid naming conflicts when merging multiple APIs.
All Operations from the .wundergraph/operations
folder will be automatically turned into Persisted Operations.
That is, each Operation will be pre-compiled and mounted on a unique URL Path.
E.g. the Operation Countries.graphql
will turn into the Endpoint /operations/Countries
.
In addition to this Endpoint, wunderctl up
will also start a code-generator that generates a TypeScript API Client, React Hooks, etc...
Have a look at the folder nextjs-frontend/generated
to see all the generated code.
Once a JSON-RPC Request hits the WunderNode (WunderGraph Server), it will call into various middlewares for authentication, caching, etc. and then execute the pre-compiled Operation.
This makes the API very secure and performant. Additionally, our GraphQL Gateway Engine is capable of doing Subscriptions for Apollo Federation as well as Live-Queries to keep the UI automatically updated.
Go to api/.wundergraph/operations
, add, remove or modify the operations.
Go to nextjs-frontend/pages/index.tsx
and modify the UI, it definitely needs some love for the CSS!
Go to api/.wundergraph/wundergraph.config.ts
and modify the introspected DataSources.