Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wundergraph/wundergraph-demo
This Repository demonstrates how to combine 7 APIs (4 Apollo Federation SubGraphs, 1 REST, 1 standalone GraphQL, 1 Mock) into one unified GraphQL API which is then securely exposed as a JSON API to a NextJS Frontend.
https://github.com/wundergraph/wundergraph-demo
api api-client api-gateway api-rest api-wrapper graphql graphql-api graphql-client graphql-server json-api rest rest-api restful
Last synced: about 2 hours ago
JSON representation
This Repository demonstrates how to combine 7 APIs (4 Apollo Federation SubGraphs, 1 REST, 1 standalone GraphQL, 1 Mock) into one unified GraphQL API which is then securely exposed as a JSON API to a NextJS Frontend.
- Host: GitHub
- URL: https://github.com/wundergraph/wundergraph-demo
- Owner: wundergraph
- Created: 2021-01-12T18:59:44.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-20T10:44:24.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T18:32:40.930Z (8 days ago)
- Topics: api, api-client, api-gateway, api-rest, api-wrapper, graphql, graphql-api, graphql-client, graphql-server, json-api, rest, rest-api, restful
- Language: TypeScript
- Homepage: https://wundergraph.com
- Size: 1.04 MB
- Stars: 68
- Watchers: 3
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application
[](https://gitpod.io/#https://github.com/wundergraph/wundergraph-demo)
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.
## Resources
Read the docs: https://wundergraph.com/docs
If you have Questions, join our Discord: https://wundergraph.com/discord
## Getting started
```shell
npm install && npm start
```
Open your browser and go to [`http://localhost:3000`](http://localhost:3000).
## How does it work?
### Merging the APIs
Have a look at `./wundergraph/wundergraph.config.ts`.
The following code-snipped introspects the different APIs and merges them all together.
```typescript
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.
### Request Flow
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.
## Hacking
### Modifying Operations
Go to `api/.wundergraph/operations`, add, remove or modify the operations.
### Updating the Frontend
Go to `nextjs-frontend/pages/index.tsx` and modify the UI, it definitely needs some love for the CSS!
### Adding or Removing DataSources
Go to `api/.wundergraph/wundergraph.config.ts` and modify the introspected DataSources.