Realtime GraphQL UI Updates in React with Apollo. ― Scotch

Realtime GraphQL UI updates in React with Apollo  #ReactJS #GraphQL

  • // ChannelsListWithData = graphql(channelsListQuery, { options: { pollInterval: 5000 a new channel from another client now updates our list of channels after 5 seconds, not the best way of doing it but a step in making the application realtime.
  • store.writeQuery({ query: channelsListQuery, data }); – } – }) – … – As soon as the mutation completes, we read the current result for the channelsListQuery out of the store, append the new channel to it, and tell Apollo Client to write it back to the store.
  • To add WebSocket support to our existing interface, we will construct a GraphQL Subscription client and merge it with our existing network interface to create a new interface that performs normal GraphQL queries over HTTP and subscription queries over WebSockets.
  • … – We edit the following part to disable const ChannelsListWithData = graphql(channelsListQuery, { options: { pollInterval: 5000 }})(ChannelsList); – … – Edit the above to: const ChannelsListWithData = to add a new channel now in our app does not reflect the changes until we refresh the page and that…
  • jsx – … – import { SubscriptionClient, addGraphQLSubscriptions } from networkInterface = createNetworkInterface({ – uri: wsClient = new { – reconnect: true – }); – – // Extend the network interface with the WebSocket – const = addGraphQLSubscriptions( – networkInterface, – wsClient – ); – To enable subscriptions throughout our…

This is the fourth and final part of a 4-part series of articles explaining the implementation of GraphQL on an Express Server and similarly in a React client using Apollo. In this article we look at how to maintain realtime UI updates after implementing different GraphQL updates that result in either creation, update or deletion of data on the server side. For part 1, 2 and 3, refer to the links:
Continue reading “Realtime GraphQL UI Updates in React with Apollo. ― Scotch”