TanStackT
TanStack•5mo ago•
2 replies
moderate-tomato

Question about using React Query as a global store

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.
Was this page helpful?