invalidateQueries not triggering refetch after mutation in Next.js 14 with intercepting routes

[SergGrey1992]

Hello everyone,

I'm facing a perplexing issue in my application, and I hope someone can help me out.

Technologies Used:

Next.js 14 with App Routing
@tanstack/react-query: ^5.59.15
nuqs for query parameter handling

I'm using the following approach to manage my query keys:

export const document = {
  all: () => ['documents'],

  lists: () => [...document.all(), 'documents'],
  list: (page: number, limit: number, name: string) =>
    queryOptions({
      queryKey: [...document.lists(), { page, limit, name }],
      queryFn: ({ signal }) => getAllDocuments(page, limit, name, signal),
      staleTime: 0,
    }),

  details: () => [...document.all(), 'detail'],
  detail: (id: string) =>
    queryOptions({
      queryKey: [...document.details(), id],
      queryFn: () => getDocumentDetail(id),
    }),
};

At the URL localhost:3000/admin/documents, the following page component is rendered:

export default async function Page({ searchParams }: PropsType) {
  const queryClient = getQueryClient();
  dataDocumentsCache.parse(searchParams);

  const page = dataDocumentsCache.get('page') ?? 1;
  const limit = dataDocumentsCache.get('limit') ?? 10;
  const search = dataDocumentsCache.get('search') ?? '';

  await queryClient.prefetchQuery(documentApi.document.list(page, limit, search));

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <main className={styles.main}>
        <DocumentsList />
      </main>
    </HydrationBoundary>
  );
}

In the DocumentsList component, I fetch and display the data:

const [{ page, limit, search }] = useQueryStates(dataDocumentsParser);
const { data } = useQuery(documentApi.document.list(page, limit, search));

return <>{data?.map(() => JSX)}</>;

Up to this point, everything works as expected.

Problem:

When I attempt to delete an item or add a new one, I run into issues.

I handle deletion using the following mutation:

export const useRemoveDocumentType = () => {
  const queryClient = useQueryClient();

  const [{ search, page, limit }] = useQueryStates(dataDocumentsParser); 

  return useMutation({
    mutationFn: async ({ id }: Body) => await documentApi.removeDocumentType(id),
    onSuccess: () => {
      const opt = documentApi.document.list(page ?? 1, limit ?? 10, search ?? '');
      queryClient.invalidateQueries({ queryKey: opt.queryKey });
    },
    onError: () => {
      // TODO: Add notification
    },
  });
};

I open a modal window using @modal at the URL localhost:3000/admin/documents/remove/{id}.

After the mutation completes successfully, I call router.back() and expect the data to refetch because I invoked queryClient.invalidateQueries({ queryKey: opt.queryKey });.

Issue:

However, the refetch does not occur, which leaves me puzzled.

I tried simulating the functionality by adding a button that prepares the queryKey and calls queryClient.invalidateQueries({ queryKey: opt.queryKey });.

In this test, the refetch happens only once; on subsequent clicks, no additional requests are made.
What I've Tried:

Ensured that the queryKeys match exactly.
Set staleTime: 0 in the query options.
Used refetchOnMount: 'always' in the useQuery options.
Verified that the query is active when invalidateQueries is called.
Considered that the modal route might affect the active state of the query.
Question:

Can someone please help me figure out what's going on? I'm out of ideas at this point.

Additional Information:

The data-fetching component (DocumentsList) is rendered in the main page component.
The mutation occurs in a modal route, which may be affecting the query's active state.
I'm using Next.js 14's intercepting routes (@modal), which might be related to the issue.

[Unsleeping]

The cache invalidation in React Query is not connected to the Next.js cache invalidation, which is likely causing the issue.