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:

Introduction

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:

Updating the client state after a mutation

In the second part of this series of articles, we had to reload the page to see the new channel that had been created; there was no automatic re-rendering of the UI. This is because Apollo has no way of knowing that the mutation we made has anything to do with the channels query that renders our list. Only the server knows that, but it has no way of notifying our client. To update the client after a mutation, we can opt for on of the following three ways:

Refetch queries that could be affected by the mutations.

Manually updating the client state based on the mutation result.

Using GraphQL are the simplest way to force a portion of your cache to reflect the information available to your server. Essentially, a refetch forces a query to immediately hit the server again, bypassing the cache. The result of this query, just like all other query results, updates the information available…

Realtime GraphQL UI Updates in React with Apollo. ― Scotch