RTK Query, Streaming updates, Initial http request needed?

[ThoMot]

Hi!
I am quite new to both websockets and RTK Query, but I'm finding it really enjoyable to work with so far, thank you!

I am working on a project where I want to receive continuous updates via websocket connection using RTK Query streaming. It is working great for me outside of the fact that it seems to require me to make a http request to fetch initial data before accepting to update this data via the websocket. From my understanding reading the docs I should be able to just connect to a websocket initially and go from there, but it does not seem to accept this, and requires me to provide an url to the baseQuery for the initial fetch?

If I let baseQuery point to the root url of the project, I get a parsing error when trying to connect.

The code I am currently using, where I have set up an api for providing the data on "http://localhost:8000" in addition to the websocket:

export const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:8000",
  }),
  endpoints: (build) => ({
    getClock: build.query<Time, void>({
      query: () => "/",
      async onCacheEntryAdded(
        arg,
        { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
      ) {
        const ws = new WebSocket("ws://localhost:8888/time");
        try {
          await cacheDataLoaded;

          const listener = (event: MessageEvent) => {
            const data = JSON.parse(event.data);
            updateCachedData(() => {
              return data;
            });
          };
          ws.addEventListener("message", listener);
        } catch {
          //...
        }
        await cacheEntryRemoved;
        ws.close();
      },
    }),
  }),
});

1. Is it a common pattern to always fetch the initial data structure via a request before connecting to a websocket?
2. Is this possible to avoid by providing this structure locally instead?

[phryneas]

Is it a common pattern to always fetch the initial data structure via a request before connecting to a websocket?

Often ppl only want to receive updates via websocket and the initial value from the server, yes. So we showed the "most complex" scenario of mixing both.

Is this possible to avoid by providing this structure locally instead?

Yes, you can find an example of that here: https://github.com/phryneas/cli-mqtt-chatclient/blob/main/src/api.ts

[Abolfazl2647]

Hi!.
@phryneas I have a question about this scenario.
I want to know how can i update other endpoint's cache data with the data we received from WebSocket. (in line 67).

basically, I need to have only one WebSocket connection for my entire app and subscribe or unsubscribe to the socket and based on the data I update the other API slice cached data.
in those examples in documentations of RTK query, here we should define new Websocket for each endpoint and that makes us have multiple connections of one Websocket which there is no need for that.
one connection per application is enough and what I'm saying is what is be best practice for us ?

// Create WebSocket connection.
import { createApi } from '@reduxjs/toolkit/query/react';
import { nanoid } from '@reduxjs/toolkit';

const socket = new WebSocket('wss://[example.com]/api/notification/ws');

const socketConnected = new Promise((resolve, reject) => {
    // Connection opened
    try {
        socket.addEventListener('open', (event) => {
            resolve(event);
        });
    } catch (err) {
        reject(err);
    }
});

export const socketApi = createApi({
    async baseQuery({ type, topic }) {
        await socketConnected;
        const sendPayload = { id: nanoid(), type, path: topic };
        socket.send(JSON.stringify(sendPayload));
    },
    endpoints: (builder) => ({
        sendMessage: builder.mutation({
            query({ type, topic }) {
                return { type, topic };
            }
        }),
        channel: builder.query({
            queryFn() {
                return { data: null };
            },
            async onCacheEntryAdded(
                topic,
                { cacheDataLoaded, updateCachedData, cacheEntryRemoved }
            ) {
                await cacheDataLoaded;

                // Listen for messages
                socket.addEventListener('message', (event) => {
                    updateCachedData((draft) => {
                        // eslint-disable-next-line no-param-reassign
                        draft.data = JSON.stringify(event.data);
                    });
                });

                await cacheEntryRemoved;
                socket.close();
            }
        })
    })
});

export const { useSendMessageMutation, useChannelQuery } = socketApi;