Streaming Updates from websocket api with redux-toolkit

[orioch]

I am new to redux-toolkit query and also new to websocket APIs, and I am trying to get a stream of data from a websocket API and store it in a redux store.

I have read the documentation for createApi and useQuery, but I am still having difficulty understanding this part.

Here is the message structure that the websocket API gets:

{
"message_type": "xxx",
"payload": {
    "event_id": "sr:match:xxxxxx"
}

}

is this code should do the work?

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query";

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: "/" }),
  reducerPath: "api",
  tagTypes: ["Message"],
  endpoints: (build) => ({
    streamMessages: build.query({
      queryFn: () => ({ data: [] }),
      async onCacheEntryAdded(arg, { updateCachedData, cacheEntryRemoved }) {
        const ws = new WebSocket("ws://localhost:8080/ws");
        ws.addEventListener("open", () => {
          ws.addEventListener("message", (event) => {
            updateCachedData((draft) => {
              draft.push(event);
            });
          });
        });

        await cacheEntryRemoved;
        ws.close();
      },
    }),
  }),
});

export const { useStreamMessagesQuery } = api;

and if it is, how can i use it? when i try using useStreamMessagesQuery in some components its undefined and not a function.
Thank you.