Using react query to distribute state when using with web sockets

export const useChat: void = () => {
  const queryClient = useQueryClient();
  const { lastJsonMessage } = useWebSocket<ChatEventType>(SocketGateways.userChat, webSocketOptions);


  useEffect(() => {
    if (!lastJsonMessage) return;
    const { userId } = lastJsonMessage;
    if (!userId) return;
    queryClient.setQueryData<IChatListItem[] | undefined>(
      [chatQuerykeys.chatList()],
      (currentChatList) => chatListReducer(currentChatList, lastJsonMessage)
    );

    queryClient.setQueryData<IChatConversation | undefined>(
      [chatQuerykeys.conversation(userId)],
      (currentConversation) => conversationReducer(currentConversation, lastJsonMessage)
    );

    queryClient.setQueryData<IChatMessage[] | undefined>(
      [chatQuerykeys.messages(userId)],
      (currentMessages) => messagesReducer(currentMessages, lastJsonMessage)
    );
  }, [queryClient, lastJsonMessage]);

};

export const useMessages = (userId: string) => {
  return useQuery({
    queryKey: chatQuerykeys.messages(userId),
    queryFn: () => chatAPI.getMessages(userId),
    staleTime: Infinity,
    keepPreviousData: true,
    refetchOnMount: false,
    retry: false
  });
};

The reducers have these signatures eg.
const messagesReducer = (
  currentMessages: IChatMessage[] | undefined,
  event: ChatEventType
): IChatMessage[] => {
//reducer logic to return new messages state
}