T
TanStack•2mo ago
continuing-cyan

Query cache persist when navigating with Tanstack navigation?

I have my query client provider around the router provider 
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
Then i have it so when you create create an item it sets the item data with the returned value. Then it navigates to the actual page for the item. But right now it's refetching the item.
1 Reply
continuing-cyan
continuing-cyanOP•2mo ago
  return useMutation<Folder, Error, CreateFolderInput>({
    mutationFn: createFolder,
    onSuccess: (...args) => {
      queryClient.setQueryData(['folder', args[0].id], args[0]);
      onSuccess?.(...args); //navigates to folder route
    },
    ...mutationConfig,
  });
  return useMutation<Folder, Error, CreateFolderInput>({
    mutationFn: createFolder,
    onSuccess: (...args) => {
      queryClient.setQueryData(['folder', args[0].id], args[0]);
      onSuccess?.(...args); //navigates to folder route
    },
    ...mutationConfig,
  });
  return useQuery<Folder>({
    queryKey: ['folder', folderId],
    staleTime: 60 * 1000,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    queryFn: () => getFolder(folderId),
    ...queryConfig,
  });
  return useQuery<Folder>({
    queryKey: ['folder', folderId],
    staleTime: 60 * 1000,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    queryFn: () => getFolder(folderId),
    ...queryConfig,
  });
I'm not sure if the actual Cache is being wiped on navigation or if the query is just set to fire.

Did you find this page helpful?