RTK Query + WebSocket

1updateCachedData((draft) => {
2    draft.push(data)
3})

1updateCachedData((draft) => {
2	draft.price = data.price;
3	draft.count = data.count;
4});

1// mock data example
2// {
3//   price: 123,
4//   count 24
5// }
6
7import type { Action, PayloadAction } from "@reduxjs/toolkit";
8import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
9import { HYDRATE } from "next-redux-wrapper";
10import { TPriceResponse } from "@/types";
11import { isMessage } from "./schemaValidators";
12
13type RootState = any;
14
15function isHydrateAction(action: Action): action is PayloadAction<RootState> {
16    return action.type === HYDRATE;
17}
18
19export const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
20export const baseWebsocketUrl =
21    process.env.NEXT_PUBLIC_BASE_WEBSOCKET_URL;
22
23export const mainApi = createApi({
24    baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
25    extractRehydrationInfo(action, { reducerPath }): any {
26        if (isHydrateAction(action)) {
27            return action.payload[reducerPath];
28        }
29    },
30    tagTypes: [`Prices`],
31    endpoints: (builder) => ({
32        getPrice: builder.query<TPriceResponse, undefined>({
33            query: () => `/price`,
34            async onCacheEntryAdded(
35                arg,
36                { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
37            ) {
38                const ws = new WebSocket(baseWebsocketUrl);
39                try {
40                    await cacheDataLoaded;
41                    const listener = (event: MessageEvent) => {
42                        const data = JSON.parse(event.data);
43                        if (!isMessage(data)) return;
44                        updateCachedData((draft) => {
45                            draft.price = data.price;
46                            draft.count = data.count;
47                        });
48                    };
49
50
51                    ws.addEventListener("message", listener);
52                } catch {}
53                await cacheEntryRemoved;
54                ws.close();
55            },
56            providesTags: [`Prices`],
57        }),
58    }),
59});
60
61export const {
62    useGetPriceQuery,
63    util: { getRunningQueriesThunk },
64} = mainApi;

1import { TPriceResponse } from "@/types";
2
3export function isMessage(message: TPriceResponse) {
4    if (message?.price || message?.count) {
5        return true;
6    }
7
8
9    return false;
10}