Best Practice for realtime data fetching using reactJS and GraphQL

Question

I am using react with graphQL and as a DB I use PostgreSQL.

so I have a list of records on my main screen and I want to change it when there's new record on my DB. my DB can be updated from different UI. so what's the best practice to update my FE without reloading whenever my DB records gets change.

as a joiner, I use react-apollo-hooks for fetching graphQL data.

What I tried:

• web sockets

Ref links:

• https://scotch.io/tutorials/realtime-graphql-ui-updates-in-react-with-apollo
• https://www.smashingmagazine.com/2018/12/real-time-app-graphql-subscriptions-postgres/

Is there any other better way to fetch the latest data from BE?

EDIT: I know there are many way to achieve this but I want to know the best way to do that. like as per industry standard way.

Answer 1

Try React-Query, it also works with both REST API and Graphql. You can make mutations to your db and invalidate the previously pulled data to get the updated data from the backend. This process is known as invalidating stale data.

const [mutate] = useMutation(addTodo, {
   onSuccess: () => {
     queryCache.invalidateQueries('todos')
     queryCache.invalidateQueries('reminders')
   },
 })

Its something like this, once you execute the FUnction addTodo which mutates the db, on successful execution, React query would invalidate the previous todos and reminders which are pulled from the db and refetch them from the db in the background.

Here is the Link to the documentation.