harsh-harlequin

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),
  }
}

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.

2 Replies

deep-jade•2mo ago

Tanstack query is specifically designed with asynchronous state in mind, and is very good at handling that. Although you can obviously abuse the query client to work with client side synchronous (or asynchronous) state, it's definitely the wrong tool for the job by no stretch of the imagination. What you are looking for is a client side state manager, tools such as Jotai, Zustand, tanstack store or even Redux will meet basically all of your needs for a client side state manager, while providing an API that is designed around client side state, rather than one that is designed around server side state. With this all said, if you really want to use Tanstack "query" for managing client state, then I can provide educated answers to your questions: 1. There is unlikely to be any performance overhead in your application that you didn't already have. Query is well optimized to handle large amounts of data, and using selectors on your queries will ensure that re-renders only occur from structural changes to your data, not referential changes. 2. From the code you have provided, you expect to be passing the query client around instead of relying on DI from the context which is also a bit strange. If you are going to take this approach, I would recommend starting with react agnostic factory functions that call queryOptions to create the query options outside of react, and then create useXQuery hooks on top of this that use a context and useQuery to get the query client and then call your options. queryOptions are type safe and will give you a queryKey that will allow you to get and set your cache entry in a typesafe way. make sure to read up on this as it's extremely important for "optimistic" updates: https://tanstack.com/query/v5/docs/framework/react/guides/query-options Jotai: https://jotai.org/ Zustand: https://zustand-demo.pmnd.rs/ Tanstack Store: https://tanstack.com/store/latest Redux: https://redux.js.org/

Query Options | TanStack Query React Docs

One of the best ways to share queryKey and queryFn between multiple places, yet keep them co-located to one another, is to use the queryOptions helper. At runtime, this helper just returns whatever yo...

Jotai

Jotai, primitive and flexible state management for React

Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and eliminates the need for memoization.

Zustand

🐻 Bear necessities for state management in React

TanStack Store

The immutable-reactive data store that powers the core of TanStack libraries and their framework adapters.

Redux - A JS library for predictable and maintainable global state ...

A JS library for predictable and maintainable global state management

genetic-orange•2mo ago

There is also legend state which boasts being the fastest. I did not use it yet though.

Gaming

Programming

Question about using React Query as a global store

Did you find this page helpful?