Use of TanStack query while SocketIO request

[moxpatwa]

Hello Team,
I need to cache my socket emit request using TanStack query to improve perfomance and cost reduction.
Can you guide me how to use TanStack query with Socketio or is there any way to cache socket io emit requests.
Thanks
Vinal Patwa

[darrachequesne]

Hi! This article explains how you can use React Query with WebSocket. You should be able to convert it to Socket.IO, something like:

const useReactQuerySubscription = () => {
  const queryClient = useQueryClient()
  React.useEffect(() => {
    const socket = io('<the server url>')
    socket.on('connect', () => {
      console.log('connected')
    });
    socket.on('entity:update', (queryKey) => {
      queryClient.invalidateQueries({ queryKey })
    });
    return () => {
      socket.disconnect()
    }
  }, [queryClient])
}

[moxpatwa]

@darrachequesne I saw that artical but i have some questions here if you can answer of that:

1. what i need to do while using socket.emit("key").
2. what is queryKey and how to use query key as i have multiple server emits and there provide updates on client side ?

[Zeddnyx]

do you succed? if yes, could u share ur repo i wanna see it:)

[rnnc]

it depends on how you've setup your event handlers on the backend, with acknowledgements it's easier since it behaves like a fetch request but with a callback

https://socket.io/docs/v4/emitting-events/#acknowledgements

function sampleQuerySocketAck(
  socket: Socket,
  query_param: string
) {

  return useQuery({
    queryKey: ["sample", query_param],
    queryFn: ({ queryKey }) => new Promise((resolve, reject) => {
      socket.emit("SAMPLE_QUERY", queryKey[1], (status: string, res: string) => {
        if (status === "SUCCESS")
          resolve(res);
        else
          reject(status);
      });
    }),
    enabled: socket.connected
  })
}

another way to do it is have dedicated listening handlers for a response

function sampleQuerySocketEmit(
  socket: Socket,
  query_param: string
) {

  return useQuery({
    queryKey: ["sample", query_param],
    queryFn: ({ queryKey }) => {
      socket.emit("SAMPLE_QUERY", queryKey[1]);
    },
    enabled: socket.connected
  })
}

function Component(
  { socket, compParam }: {
    socket: Socket,
    compParam: string
  }
) {

  const { data } = sampleQuerySocketEmit(socket, compParam);
  const queryClient = useQueryClient();

  useEffect(() => {
    socket.on("SAMPLE_QUERY_RESULT", (res: string) => {
      queryClient.setQueryData(["sample", "TEST"], res);
    })
  }, [compParam, queryClient]);

  return (<div>{data}</div>)
}

eitherways remember to store sockets in a useRef and provide them using context

[chan-byeong]

I actively utilized the Ack event to integrate Socket.IO and Tanstack Query. Since the Ack event follows a structure where a response is returned for a request, it is very simliar to HTTP.
Therefore I created a function that wraps it with a Promise ( or you can also use emitWithAck method provided by Socket.IO ) and utilized it in useSuspenseQuery

import { Socket } from 'socket.io-client';

export const emitEventWithAck = <T>(socket: Socket, event: string, data: any) => {
  return new Promise<T>((resolve, reject) => {
    socket.emit(event, data, (response: T) => {
      if (response) {
        resolve(response);
      } else {
        reject(new Error(`"${event}" event emit failed`));
      }
    });
  });
};

export const useSomeRequest = ( ) => {
  return useSuspenseQuery({
    queryKey: ['queryKey'],
    queryFn: () => emitEventWithAck<T>(socket, 'eventName', { payload }),
  });
};