Redux Toolkit Query Graphql + Subscriptions

Question

I really love graphql + rtk query but I cant get the graphql subscriptions working.

I almost directly copied the streaming update example from the redux documentation. But I get the error subscriptions are not supported over HTTP, use websockets instead.

I dont know how to solve this, any help? Can barely find any documentation about graphql subscriptions + rtk query

userStatus: builder.query<
      UserStatusSubscriptionSubscription,
      {
        event_id: string;
        user_id: string;
      }
    >({
      query: ({ event_id, user_id }) => ({
        document: gql
          subscription UserStatusSubscription(
            $event_id: uuid!
            $user_id: String!
          ) {
            eetschema_event_by_pk(id: $event_id) {
              event_attendees(where: { user_id: { _eq: $user_id } }) {
                status
                event_id
                user_id
              }
            }
          }
        ,
        variables: { event_id, user_id },
      }),
      async onCacheEntryAdded(
        arg,
        { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
      ) {
        // create a websocket connection when the cache subscription starts
        const ws = new WebSocket("ws://localhost:8080");
        try {
          // wait for the initial query to resolve before proceeding
          await cacheDataLoaded;

          // when data is received from the socket connection to the server,
          // if it is a message and for the appropriate channel,
          // update our query result with the received message
          const listener = (event: MessageEvent) => {
            const data = JSON.parse(event.data);

            console.log("This is the data from the subscription!", data);
            if (data.channel !== arg) return;

            updateCachedData((draft) => {
              draft = data;
            });
          };

          ws.addEventListener("message", listener);
        } catch {
          // no-op in case cacheEntryRemoved resolves before cacheDataLoaded,
          // in which case cacheDataLoaded will throw
        }
        // cacheEntryRemoved will resolve when the cache subscription is no longer active
        await cacheEntryRemoved;
        // perform cleanup steps once the cacheEntryRemoved promise resolves
        ws.close();
      },
    }),

Answer 1

What I found out from the Discord chat that there currently is no support for GraphQL Subscriptions. Discord chat link found on the official website

No subscription support at the moment, but you can build something like that using the chat example from the docs I cite phryneas (he/him) — 06/11/2021

There is also a github issue, which was closed saying this is not possible and you should use a library like urql or apollo. link

I hope this helps, was looking for an answer for ages.