Duplicate data and the same mutationKey with persist

[ChiaJune]

Hello!

First I want to express my apologies for using Google Translate to paraphrase my question.

I'm having some problems using @tanstack/react-query+createSyncStoragePersister. I used useMutation to initiate a login request, and then cached the returned data persistently. In order to test login, I will initiate multiple requests, but the final result is that multiple pieces of data with the same mutationKey will be cached.

The result I expect is that for the same mutationKey, there will only be one piece of data. If there is new data, the old data should be updated or overwritten.

Here is part of my code:

// Provider.tsx
'use client';
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import { QueryClient } from '@tanstack/react-query';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { type PropsWithChildren, type ReactNode } from 'react';

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnReconnect: false,
        refetchOnWindowFocus: false,
        retry: false,
        refetchInterval: false,
        staleTime: 1000 * 60,
        gcTime: Infinity
      },
      mutations: {
        gcTime: Infinity,
        retry: false
      }
    }
  });
}

export let browserQueryClient: QueryClient | undefined = undefined;
const persister = createSyncStoragePersister({
  storage: typeof window !== 'undefined' ? window.localStorage : undefined
});

function getQueryClient() {
  if (typeof window === 'undefined') {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

export function Provider({ children }: PropsWithChildren) {
  const queryClient = getQueryClient();

  return (
    <PersistQueryClientProvider
      persistOptions={{
        persister,
        dehydrateOptions: {
          shouldDehydrateQuery(query) {
            return ['/user/trial', '/current_plan', '/visitorId'].includes(
              query.queryKey[0] as string
            );
          },
          shouldDehydrateMutation(mutation) {
            return ['/user/login'].includes(mutation.options.mutationKey?.[0] as string);
          }
        }
      }}
      client={queryClient}
    >
      {children}
    </PersistQueryClientProvider>
  );
}

---

// login.tsx
const { mutate, isPending } = useMutation({
    mutationKey: ['/user/login'],
    mutationFn: login,
    onSuccess(data) {
      console.log(data);
    },
    onError(error) {
      console.log(error);
    }
  });

---

localStorage data:

[TkDodo]

The result I expect is that for the same mutationKey, there will only be one piece of data.

mutationKey doesn't de-duplicate data like queries do, because mutations are imperative. You click a button, you expect it to do something. If the user can't click a button twice - disable the button after the first click.