What's the best way to get query data from conditional children?

[dwncy]

Let's say we have:

const fakeUserApi = () => {}

const useUsers = () => {
   const { data: users, ...rest } =  useQuery(['users'], fakeUserApi)
   const usersById = useMemo(() => keyBy(data, 'id'), data)
   
   return { users, usersById, ...rest }
}

const App = () => {
   const { isFetching } = useUsers()
   
   if (isFetching) { return 'fetching...' }

   return (
       <Users />
   )
}

const Users = () => {
   const { usersById } = useUsers()
   return (
      <div>{JSON.stringify(usersById)}</div>
   )
}

This will make re-render an infinite loop, so should I fetch one in the App and use queryClient.getQueryData to get usersById ?

[TkDodo]

the code above produces a sequence of events that don't go well with each other, but there are multiple ways to fix this. First, we have to understand the default settings of react-query and what the code above does:

• You load App and show a loading spinner isFetching: true
• Then, you mount <Users />
• With the default staleTime of 0 (and refetchOnMount set to true), you'll get the user data, but you'll also get a background refetch.
• This will in turn set isFetching: true, because isFetching is true whenever there is a request going out.
• This will unmount the <Users /> component.
• After the fetch completes, <Users /> will mount again, and we can repeat the process infinitely.

---

Possible solutions, in order of usefulness:

• check for isLoading instead of isFetching. You likely don't want to unmount the complete <Users /> component every time a background refetch is going on. React Query is made to stop spinners from showing up, not the other way around.
• set a small staleTime for your query. This might be a good thing regardless, but it would also stop the mounting of the <Users /> component to trigger an immediate refetch.
• disable refetchOnMount, but this just fixes this one symptom, not the cause.

[dwncy]

thanks for the fast reply! 🙏 but the possible solutions won't work if the first call to fakeUserApi trigger error 500 or sth, It will produce the sequence of events that you mention even if we use isLoading. I am currently using react-query v3.6.0

I'm thinking to get the keyBy data usersById from queryClient.getQueryData.

export const useGetUsersByIdFromQueryCache = () => {
  const queryClient = useQueryClient()
  const users = queryClient.getQueryData(['users'])
  return keyBy(users, 'id')
}

so fetch one in the App
and if some childrens uses it, it get from useGetUsersByIdFromQueryCache(), any opinion on this?

[dwncy]

where components are implicitly coupled right, seems hard to track. thanks for the opinion! 🙏 will check the blog 😃

[rickvian]

if im not mistaken if in the example @dwncy provide above, if we have 'success' property in the useQuery option, it will be called as much as the hooks called in the component tree

isn't it better to get data from queryClient instead? and call the useQuery only once on parent?

[TkDodo]

isn't it better to get data from queryClient instead? and call the useQuery only once on parent?

no, for the reasons I outlined above.

[dwncy]

sorry @TkDodo does the example ok if we want to put it in React Context to avoid prop drilling

const App = () => {
  const { data } = useUsers()

  return (
    <UserContext.Provider value={data}>
      <Children />
    </UserContext.Provider>
  )
}

const Children = () => {
  const data = useContext(UserContext)
  return <div>{data}</div>
}

[dwncy]

and check for isError somewhere. Seems the amount of checkingisError will equivalent with the amount of customHooks useUsers that we call(?)