Question about using React Query as a global store

[Vittor-Emanoel]

Hi team,

We’re currently using React Query as a sort of client-side store or global state in our application. Here’s a simplified example:

import { QueryClient, useQuery } from '@tanstack/react-query'
import { GlobalStoreTypes } from './types'

type ConversationTitle = {
  title: string
  mustUpdateTitleBasedOnSubject: boolean
}

const initialData = {
  title: '',
  mustUpdateTitleBasedOnSubject: true,
}

const getConversationTitle = () =>
  useQuery({
    queryKey: [GlobalStoreTypes.ConversationTitle],
    queryFn: async (): Promise<ConversationTitle> => initialData,
    enabled: false,
    retry: false,
    initialData: initialData,
  })

export const setConversationTitle =
  (queryClient: QueryClient) =>
  (updater: (oldData: ConversationTitle) => ConversationTitle | undefined) => {
    queryClient.setQueryData(
      [GlobalStoreTypes.ConversationTitle],
      (oldData: ConversationTitle) => updater(oldData),
    )
  }

export const useConversationTitle = (queryClient: QueryClient) => {
  return {
    conversationTitleData: getConversationTitle().data,
    setConversationTitle: setConversationTitle(queryClient),
  }
}

We then update the state via setQueryData. Sometimes, developers also attach the queryClient to the window object to update the cache globally.

My questions are:

1. Could using React Query this way (as a client-side global store) cause performance issues, especially at app startup?
2. Are there any risks or anti-patterns in using React Query purely for client state instead of server state?

Our supervisor believes this approach is fine, but I wanted to confirm best practices with the community.

[TkDodo]

My answer to this is always that it’s not a good idea and that this is not what react-query was made for and that you’re probably missing a bunch of settings to make this better. For example, you haven’t customized garbage collection...

I’m talking about this here:
https://tkdodo.eu/blog/react-query-the-bad-parts