Websockets with RTK Query configuration issues

Question

I am trying to implement a Websocket connection from a React TypeScript app using RTK query. At the moment I am just trying to connect to a local socket.io server BUT ultimately it will be an AWS API Gateway with Cognito auth. In any case I having some problems getting this to work as a simple starting point. I have a few elements at play that may be causing the issue/s:-

• MSW is being used to intercept http requests to mock a restful API locally. I wonder if this is one of the issues
• I am adding the Websocket as a query to an RTK Query createApi object with other queries and mutations. In reality the Websocket query will need to hit a different API Gateway to the one that is being set as the baseQuery baseUrl currently. Do I need to create a new and separate RTK Query api using createApi() for the Websocket query?

Anyhow, here is the server code:-

// example CRA socket.io from https://github.com/socketio/socket.io/blob/main/examples/create-react-app-example/server.js

const getWebsocketServerMock = () => {
    const io = require('socket.io')({
        cors: {
            origin: ['http://localhost:3000']
        }
    });

    io.on('connection', (socket: any) => {
        console.log(`connect: ${socket.id}`);

        socket.on('hello!', () => {
            console.log(`hello from ${socket.id}`);
        });

        socket.on('disconnect', () => {
            console.log(`disconnect: ${socket.id}`);
        });
    });

    io.listen(3001);

    setInterval(() => {
        io.emit('message', new Date().toISOString());
    }, 1000);

    console.log('Websocket server file initialised');
};

getWebsocketServerMock();

export {};

My RTK Query api file looks like this:-

    reducerPath: 'someApi',
    baseQuery: baseQueryWithReauth,
    endpoints: (builder) => ({
        getWebsocketResponse: builder.query<WebsocketResult, void>({
            query: () => ``,
            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {        
                try {                  
                    // wait for the initial query to resolve before proceeding
                    await cacheDataLoaded;

                    const socket = io('http://localhost:3001', {});
                    console.log(`socket.connected: ${socket.connected}`);
                    socket.on('connect', () => {
                        console.log('socket connected on rtk query');
                    });

                    socket.on('message', (message) => {
                        console.log(`received message: ${message}`);
                        // updateCachedData((draft) => {
                        //     draft.push(message);
                        // });
                    });

                    await cacheEntryRemoved;        
                } catch {
                    // no-op in case `cacheEntryRemoved` resolves before `cacheDataLoaded`,
                    // in which case `cacheDataLoaded` will throw
                }                 
            }
        }),
        getSomeOtherQuery(.....),
        getSomeOtherMutation(....),

Any advice or thoughts would be greatly appreciated! I guess my main question is should I be able to combine the websocket query in the same createApi function with other queries and mutations that need to use a different baseQuery url as they need to hit different API Gateways on AWS?

Much thanks,

Sam

Answer 1

You can circumvent the baseQuery from being used by specifying a queryFn instead of query on your endpoint.

In the most simple version, that just returns null as data so you can modify it later - but if you have an initial websocket request you can also do that in the queryFn.

  queryFn: async () => { return { data: null } },