Skip to content

A demo to connect a React client app to two different graphql services and use a graphql subscription alongside a federated data graph.

Notifications You must be signed in to change notification settings

SiddharthMantri/graphql-pocs

Repository files navigation

Using Subscriptions with a Federated data graph in a React App


A demo project to show how to connect a React client app to two different graphql services and use a graphql subscription alongside a federated data graph.

Architecture

For the purpose of this example, these are the services being run:

  • A federated subgraph that returns a list of books and extends the book type to include a user. localhost:8080
  • A federated subgraph that return a list of users. localhost:8090
  • An apollo gateway server that serves these two subgraphs. localhost:9000
  • A subscription service that publishes an event whenever a new book is created. localhost:9100

These services are queried through an Apollo Client instance in the React app running on localhost:3000

Start

Replicate the .env.sample into a .env file.

# Install deps
yarn

# run the services in separate terminal windows

yarn start:server # Runs scripts/start.ts
yarn start:client # Starts the webpack dev server

Your client app will be served on http://localhost:3000. If you then connect to http://localhost:9100/createBook in a new tab on your browser, a new pubsub event will be created which will publish data to the exposed subscription which in turn will trigger a re-render of the books on the browser.

Notes

  • For the demo, I'm using the deprecated serviceList option to enable the gateway.
  • The react code is suboptimal but it gets the job done.

About

A demo to connect a React client app to two different graphql services and use a graphql subscription alongside a federated data graph.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published