{"id":15192365,"url":"https://github.com/wundergraph/wundergraph-demo","last_synced_at":"2025-09-10T05:40:44.502Z","repository":{"id":41347206,"uuid":"329083874","full_name":"wundergraph/wundergraph-demo","owner":"wundergraph","description":"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.","archived":false,"fork":false,"pushed_at":"2022-12-20T10:44:24.000Z","size":1087,"stargazers_count":68,"open_issues_count":2,"forks_count":11,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-09-28T21:22:38.649Z","etag":null,"topics":["api","api-client","api-gateway","api-rest","api-wrapper","graphql","graphql-api","graphql-client","graphql-server","json-api","rest","rest-api","restful"],"latest_commit_sha":null,"homepage":"https://wundergraph.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wundergraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-12T18:59:44.000Z","updated_at":"2024-09-01T20:36:42.000Z","dependencies_parsed_at":"2023-01-30T00:30:47.830Z","dependency_job_id":null,"html_url":"https://github.com/wundergraph/wundergraph-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fwundergraph-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wundergraph","download_url":"https://codeload.github.com/wundergraph/wundergraph-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860932,"owners_count":16556009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-client","api-gateway","api-rest","api-wrapper","graphql","graphql-api","graphql-client","graphql-server","json-api","rest","rest-api","restful"],"created_at":"2024-09-27T21:22:45.522Z","updated_at":"2024-10-11T13:03:33.303Z","avatar_url":"https://github.com/wundergraph.png","language":"TypeScript","readme":"# WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/wundergraph/wundergraph-demo)\n\n\nThis repository demonstrates how to combine multiple APIs into one unified API\nand exposing it as a secure JSON API without losing on developer experience.\n\nWe're combining the following services:\n- 4 Apollo GraphQL SubGraphs (Accounts, Inventory, Products, Reviews) combined as a SuperGraph\n- 1 REST API (JSON Placeholder)\n- 1 standalone GraphQL API (Trevorblades Countries GraphQL API)\n- 1 Mock REST API\n\n![Architecture Overview](ArchitectureOverview.png \"Architecture Overview\")\n\nAll 7 APIs are combined into one unified GraphQL API and securely exposed using JSON RPC.\n\nThis example shows how to use Apollo Federation with Subscriptions,\na unique feature to WunderGraph.\nWunderGraph is the only GraphQL Gateway that supports this feature.\n\nAdditionally, this example also shows Live Queries.\nBy using server-side Polling, we're able to turn any API into a realtime stream.\n\n## Resources\n\nRead the docs: https://wundergraph.com/docs\n\nIf you have Questions, join our Discord: https://wundergraph.com/discord\n\n## Getting started\n\n```shell\nnpm install \u0026\u0026 npm start\n```\n\nOpen your browser and go to  [`http://localhost:3000`](http://localhost:3000).\n\n## How does it work?\n\n### Merging the APIs\n\nHave a look at `./wundergraph/wundergraph.config.ts`.\nThe following code-snipped introspects the different APIs and merges them all together.\n\n```typescript\nconst jsonPlaceholder = introspect.openApi({\n    apiNamespace: \"jsp\",\n    source: {\n        kind: \"file\",\n        filePath: \"jsonplaceholder.v1.yaml\",\n    },\n})\n\nconst weather = introspect.graphql({\n    apiNamespace: \"weather\",\n    url: \"https://graphql-weather-api.herokuapp.com/\",\n});\n\nconst federatedApi = introspect.federation({\n    apiNamespace: \"federated\",\n    upstreams: [\n        {\n            url: \"http://localhost:4001/graphql\"\n        },\n        {\n            url: \"http://localhost:4002/graphql\"\n        },\n        {\n            url: \"http://localhost:4003/graphql\"\n        },\n        {\n            url: \"http://localhost:4004/graphql\",\n        },\n    ]\n});\n\nconst countries = introspect.graphql({\n    apiNamespace: \"countries\",\n    url: \"https://countries.trevorblades.com/\",\n})\n\nconst myApplication = new Application({\n    name: \"api\",\n    apis: [\n        federatedApi,\n        countries,\n        jsonPlaceholder,\n        weather,\n    ],\n});\n```\n\nOnce everything is merged, and the configuration is built,\nthe WunderGraph engine is able to delegate all Requests tox the correct upstream(s).\n\nBy applying namespaces to each individual API,\nwe're able to avoid naming conflicts when merging multiple APIs.\n\n### Request Flow\n\nAll Operations from the `.wundergraph/operations` folder will be automatically turned into Persisted Operations.\nThat is, each Operation will be pre-compiled and mounted on a unique URL Path.\nE.g. the Operation `Countries.graphql` will turn into the Endpoint `/operations/Countries`.\n\nIn addition to this Endpoint, `wunderctl up` will also start a code-generator that generates a TypeScript API Client, React Hooks, etc...\nHave a look at the folder `nextjs-frontend/generated` to see all the generated code.\n\nOnce a JSON-RPC Request hits the WunderNode (WunderGraph Server),\nit will call into various middlewares for authentication, caching, etc.\nand then execute the pre-compiled Operation.\n\nThis makes the API very secure and performant.\nAdditionally, our GraphQL Gateway Engine is capable of doing Subscriptions for Apollo Federation as well as Live-Queries to keep the UI automatically updated.\n\n## Hacking\n\n### Modifying Operations\n\nGo to `api/.wundergraph/operations`, add, remove or modify the operations.\n\n### Updating the Frontend\n\nGo to `nextjs-frontend/pages/index.tsx` and modify the UI, it definitely needs some love for the CSS!\n\n### Adding or Removing DataSources\n\nGo to `api/.wundergraph/wundergraph.config.ts` and modify the introspected DataSources.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fwundergraph-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwundergraph%2Fwundergraph-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fwundergraph-demo/lists"}