T
TanStack•2y ago
absent-sapphire

Query invalidation problem

I have an (infinite) query with the key: ["structure", "detail", projectId, parentFolderId, searchParams] where parentFolderId can be string or undefined. One example of such a query key that's stored in the cache is: 
[
  "structure",
  "detail",
  "73f3037b-bad3-47df-9f03-aa207164c2df",
  null,
  {}
]
[
  "structure",
  "detail",
  "73f3037b-bad3-47df-9f03-aa207164c2df",
  null,
  {}
]
I do query invalidation with this exact same key after some mutation succeds, but for some reason this query doesn't get invalidated. Is the problem possibly with the null value? (oh also one more question while I'm at it, it appears that the optional parameter, parentFolderId automatically gets converted to null when I don't pass anything)
2 Replies
eastern-cyan
eastern-cyan•2y ago
you should show your own code so someone can help you
absent-sapphire
absent-sapphireOP•2y ago
Sure This is the query factory: 
export const structureQueries = {
  all: () => ["structure"],
  lists: () => [...structureQueries.all(), "list"],
  details: () => [...structureQueries.all(), "detail"],
  detail: (searchParams: ProjectStructurePageSearch, projectId: string, parentFolderId?: string) =>
    infiniteQueryOptions({
      queryKey: [...structureQueries.details(), projectId, parentFolderId, searchParams],
      queryFn: ({ pageParam = 0 }) =>
        structureService.getStructure({ ...searchParams, pageParam }, projectId, parentFolderId),
      initialPageParam: 0,
      getNextPageParam: (lastPage, allPages) => {
        const nextPage =
          lastPage.content.length === DEFAULT_PAGINATION_SIZE ? allPages.length : undefined;
        return nextPage;
      },
    }),
};
export const structureQueries = {
  all: () => ["structure"],
  lists: () => [...structureQueries.all(), "list"],
  details: () => [...structureQueries.all(), "detail"],
  detail: (searchParams: ProjectStructurePageSearch, projectId: string, parentFolderId?: string) =>
    infiniteQueryOptions({
      queryKey: [...structureQueries.details(), projectId, parentFolderId, searchParams],
      queryFn: ({ pageParam = 0 }) =>
        structureService.getStructure({ ...searchParams, pageParam }, projectId, parentFolderId),
      initialPageParam: 0,
      getNextPageParam: (lastPage, allPages) => {
        const nextPage =
          lastPage.content.length === DEFAULT_PAGINATION_SIZE ? allPages.length : undefined;
        return nextPage;
      },
    }),
};
This is the mutation that's doing the invalidation: 
const useNewFolder = ({ projectId }: { projectId: string }) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: structureService.newFolder,
    onSuccess: () => {
      toast.success("Added new folder!");
      queryClient.invalidateQueries({
        queryKey: structureQueries.detail({}, projectId).queryKey,
      });
    },
  });
};
const useNewFolder = ({ projectId }: { projectId: string }) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: structureService.newFolder,
    onSuccess: () => {
      toast.success("Added new folder!");
      queryClient.invalidateQueries({
        queryKey: structureQueries.detail({}, projectId).queryKey,
      });
    },
  });
};
ProjectStructurePageSearch is an object type: 
{
    textSearch?: string | undefined;
    dateModified?: number | undefined;
    uploadedBy?: string | undefined;
    category?: string | undefined;
}
{
    textSearch?: string | undefined;
    dateModified?: number | undefined;
    uploadedBy?: string | undefined;
    category?: string | undefined;
}

Did you find this page helpful?