Using React Query with GraphQL Subscriptions

[DaniAkash]

I have been trying out React Query with graphql. I couldn't figure out a way to get it working with subscriptions as they are technically not promises but Real-time data.

Any ideas on how to get the subscriptions running with react query will greatly help...

[DaniAkash]

Looks like there isn't a direct way to use subscriptions with GraphQL. There were discussions about building something like useStreamQuery but it wasn't implemented. So I came up with my own approach to using subscriptions.

Since most subscriptions are just updates on the data that was already fetched by one of my graphQL queries, Say I have to fetch a list of tasks

My initial Query will look something like this:

const useTasks = () => {
  return useQuery("tasks", fetchTasks)
}

Now, any update on the tasks data will fire a subscription that will give me the modified / new task with an ID. So I add my subscription in useEffect & update the API data directly using queryClient

const onNewTask = (newTask) => {
  queryClient.setQueryData("tasks", oldData => {
     return [newTask, ...oldData]
  })
}

const useTasks = () => {

  useEffect(() => {
    const unsubscribe = subscribeToTasks(onNewTask)
    return () => unsubscribe()
  })

  return useQuery("tasks", fetchTasks)
}

So far it has been working fine. Have identified a scenario where setQueryData doesn't re-render the UI (#1535) but other than that, this is how I got subscriptions working.

[andrei-zgirvaci]

Thanks for the solution! Worked like a charm!

[ejkkan]

Hey!

Been trying to find a solution for awhile now and can't really seem to get one that will work.
Would it be possible to post a full example her?
For exampe what is done in "subscribeToTasks"? @DaniAkash

[kbzowski]

I had the exact same problem. I must admit that the topic of subscriptions in GraphQL is highly confusing especially for new comers (like me). For now (till NestJS would not introduce support for graphql-ws in v9, I just wrote pure WebSocket implementation of the client-side subscriptions:

import {NewProductsDocument, Product, ProductsQuery} from "../../generated/graphql";
import {useEffect} from "react";
import {useQueryClient} from "react-query";

const url = 'ws://localhost:9000/graphql';

export const useNewProductsSubscription = ({welderId}) => {
    const queryClient = useQueryClient();

    useEffect(() => {
        const ws = new WebSocket(url, 'graphql-ws');

        ws.onopen = () => {
            ws.send(JSON.stringify({"type": "connection_init", "payload": {}}));
            ws.send(JSON.stringify({
                "id": "1",
                "type": "start",
                "payload": {
                    "variables": {"welderId": welderId},
                    "extensions": {},
                    "operationName": "NewProducts",
                    "query": NewProductsDocument
                }
            }))
        }

        ws.onmessage = (event) => {
            const msg = JSON.parse(event.data)

            if(msg.type == 'data'){
                const data = msg.payload.data.productAdded
                queryClient.setQueriesData<ProductsQuery>('Products', (oldData : ProductsQuery) => {
                    return {...oldData, getLastProducts: [...oldData.getLastProducts, data]};
                })
            }
        }

        return () => {
            // Unsubscribe before exit
            ws.send(JSON.stringify({"id":"1","type":"stop"}))
            ws.close()
        }
    }, [])
}

It is heavily based on https://tkdodo.eu/blog/using-web-sockets-with-react-query and just add new data which comes from ws to the cache.
For the sake of completion:

schema.graphql:

scalar DateTime

type Product {
  label: String!
  time: DateTime!
}

type Query {
  getLastProducts(count: Int!, welderId: Int!): [Product!]!
}

type Subscription {
  productAdded(welderId: Int!): Product!
}

subscription.graphql (this query is NewProductsDocument in my case) :

subscription NewProducts( $welderId: Int! ){
    productAdded(welderId: $welderId) {
        time
        label
    }
}

[EssamKayal96]

thanks for posting such a solution but for me the solution is not completed yet since I don't know how to send Authorization with the socket.

I am working with Hasura and react-query and I am following this example you provide, so kindly if you can suggest any idea about how to send Authorization via WebSocket.

[EssamKayal96]

for those who have the same issue as me to pass authentication with WebSocket you just have to send it like so

ws.send(
        JSON.stringify({
          type: 'connection_init',
          payload: {
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          },
        })
      );

[ikoif]

Thank you @kbzowski for the completeness of your answer! As a beginner, I was completely lost as to how to send a GraphQL Subscription request this way.

For anyone landing here from an Apollo tutorial, I want to note that the code above works for the graphql-ws Protocol! Which is now deprecated and the latest (v4 at this time) Apollo docs implement the graphql-ws library which uses a new graphql-transport-ws protocol! The docs for it can be found https://github.com/enisdenjo/graphql-ws/blob/master/PROTOCOL.md

This change could affect anyone, regardless of the fact if you are doing your implementation. You need to find out what protocol the GraphQL WS Server uses. If it happens to be the new graphql-transport-ws the following has to change:

From

const ws = new WebSocket(url, 'graphql-ws');
...
ws.send(JSON.stringify({
  "id": "1",
  "type": "start",
...
return () => {
  // Unsubscribe before exit
  ws.send(JSON.stringify({"id":"1","type":"stop"}))

To

const ws = new WebSocket(url, 'graphql-transport-ws'); // <-- Change here
...
ws.send(JSON.stringify({
  "id": "1",
  "type": "subscribe", // <-- Change here
...
return () => {
  // Unsubscribe before exit
  ws.send(JSON.stringify({"id":"1","type":"complete"})) // <-- Change here

[ThomasObenaus]

@ikoif Thanks a lot, that fixed a weird behavior I had:

1. getting thousands of messages from the server of type 'ka'
2. getting a broken connection.

Now it works like a charm.