T
TanStack•3mo ago
exotic-emerald

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
exotic-emerald
exotic-emeraldOP•3mo 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?