foreign-sapphire

Safely setting store state based on query data/status

We have a main grid component that is effectively the most important component in our app - the entire rest of the UI depends on knowing when it's loading, has data/is empty, etc. We're using a zustand store to hold a few basic pieces of information, but we need to set this information based on the results and status of the react query. However, we can't directly set the store values in the below example because on initial render that would trigger the dreaded react error "Cannot update a component while rendering a different component" Our approach is wrong here, so I'm curious on what the recommended way of handling this would be. Wrapping the setXYZ code in useEffect works but I don't think that's a valid solution here, just a bandaid. The setXYZ code really should just be called on the first success event and then any time a refetch begins after that, but I've always hated having some kind of initial state boolean and hope there's a better way

const MainGrid = () => {
  const { data, isFetching } = useQuery(...)

  setMainGridIsReady(!isFetching)
  setMainGridIsEmpty(!data?.length)

  return <Grid .../>
}

const MainGrid = () => {
  const { data, isFetching } = useQuery(...)

  setMainGridIsReady(!isFetching)
  setMainGridIsEmpty(!data?.length)

  return <Grid .../>
}

4 Replies

automatic-azure•2y ago

Yeah syncing the status of a query to Zustand in itself is so wrong Make a custom hook that wraps your useQuery

foreign-sapphireOP•2y ago

I don't see how that helps anything, the hook would have to lifted so far up for the data to be accessible anywhere nor do I see how a custom hook does anything useQuery doesn't already do. We're not syncing the status of the query exactly, we're telling all other components in the app that the grid component isn't usable. All of those components depend on data existing and in most cases being selected. every route has their own main grid. a store is an appropriate way to share that kind of data

automatic-azure•2y ago

const useMainGridIsReady = () => !useQuery(...).isFetching

const useMainGridIsReady = () => !useQuery(...).isFetching

use it like this?

correct-apricot•10mo ago

Any additional details for this? OP did that suggestion work for you?

Gaming

Programming

Safely setting store state based on query data/status

Did you find this page helpful?