Redux Toolkit Query Graphql + Subscriptions

Viewed 234

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();
      },
    }),
0 Answers
Related