T
TanStack•13mo ago
wise-white

Confused about using React Query as a state manager for Nextjs dynamic pages

Hello, I'm a bit confused with how to use the React Query as a state manager. Let's say I have a dynamic route like /list/:slug I first prefetch the query like this. 
await queryClient.prefetchQuery({
      queryKey: [QueryKeys.equipmentList, listName],
      queryFn: () => getListData(listName),
    })
await queryClient.prefetchQuery({
      queryKey: [QueryKeys.equipmentList, listName],
      queryFn: () => getListData(listName),
    })
So in order to use the data everywhere on my page, I made this hook 
export const useFetchList = (listName?: string | null) =>
  useQuery({
    queryKey: [QueryKeys.equipmentList, listName],
    queryFn: () => getListData(listName as string),
    placeholderData: keepPreviousData,
    enabled: !!listName,
  })
export const useFetchList = (listName?: string | null) =>
  useQuery({
    queryKey: [QueryKeys.equipmentList, listName],
    queryFn: () => getListData(listName as string),
    placeholderData: keepPreviousData,
    enabled: !!listName,
  })
But in order to get the data in other components, I would need to know the value of the current listName because i have to pass it to the hook. So in order to do that, I would need to save it to a global state using something like Zustand right? I would need to initialize the global store with the listName value. Am I understanding this correctly?
3 Replies
like-gold
like-gold•13mo ago
you need to make listName available everywhere in your app, yes. A good place is often the url, like /list/foo would have listName: 'foo', while /list/bar would have listName: 'bar' but of course, it depends on what listName is 😅
like-gold
like-gold•13mo ago
I'm covering this in my talk here: https://tkdodo.eu/blog/thinking-in-react-query
Thinking in React Query
In this talk, we will learn how a different mindset can help us understand React Query and work with it efficiently.
wise-white
wise-whiteOP•13mo ago
Thank you!

Did you find this page helpful?