TanStackT
TanStack•14mo ago•
4 replies
sacred-rose

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


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


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