(function(){ let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = innerWidth, h = canvas.height = innerHeight, particles = [], properties = { bgColor : 'rgba(17, 17, 19, 1)', particleColor : 'rgba(255, 40, 40, 1)', particleRadius : 3, particleCount : 60, particleMaxVelocity : 0.5, lineLength : 150, particleLife : 6, }; document.querySelector('body').appendChild(canvas); window.onresize = function() { w = canvas.width = innerWidth; h = canvas.height = innerHeight; } class Particle { constructor() { this.x = Math.random()*w;

Home PostsRTK Query + WebSocket

RTK Query + WebSocket

To update data via a WebSocket in RTK Query, there is a function called onCacheEntryAdded.

In the example below:

isMessage is a function that checks whether data was received via WebSocket;
updateCachedData updates the RTK Query cache for this request;
draft is the current cached data instance.

If the data is an array, you update it using push, as shown in the RTK Query documentation:

JavaScript

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

If the data is an object, you update its fields directly:

JavaScript

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

Full RTK Query API file example:

typescript | api.ts

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;

Example isMessage function:

JavaScript | schemaValidators.ts

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}

RTK Query documentation on WebSocket usage.

RTK Query + WebSocket

To update data via a WebSocket in RTK Query, there is a function called onCacheEntryAdded.

In the example below:

isMessage is a function that checks whether data was received via WebSocket;

updateCachedData updates the RTK Query cache for this request;

draft is the current cached data instance.

If the data is an array, you update it using push, as shown in the RTK Query documentation:

JavaScript

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

If the data is an object, you update its fields directly:

JavaScript

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

Full RTK Query API file example:

typescript | api.ts

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;

Example isMessage function:

JavaScript | schemaValidators.ts

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}