Mutation cache does not contain the mutationFn key

[sandergo90]

Describe the bug

Hi!

I'm currently implementing offline support for my application using the v4 version but I'm having a problem with the mutation cache.

It seems that in the hydration.js file, the mutationFn is returned in the dehydrateMutation function. This is causing the warning No mutationFn found.

Your minimal, reproducible example

Not able

Steps to reproduce

1. Open your application while online
2. Go offline and do some mutation that's supposed to be persisted and resumed when going online
3. Close your application fully
4. Go back online
5. Open your application again
6. Call queryClient.resumePausedMutations(); inside the onSuccess function of the PersistQueryClientProvider
7. Warning is shown, and the mutation is not executed.

Expected behavior

I expect my mutation to be cached correctly, and I expect the mutation function to be executed when resumed.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

iOS, Android

react-query version

4.0.0-beta.5

TypeScript version

No response

Additional context

No response

[TkDodo]

The problem is a conceptual one: How would you serialize a function to JSON, so that you can store it in e.g. localStorage? You cannot :)

The workaround is to use a default mutationFn for all mutations that you want to re-run after persistence.

I have documented this limitation in the docs here, and the offline example also uses this approach.

[sandergo90]

Right! ;) Then we will need to implement this for all required offline calls. Thanks!

[HugoLiconV]

I'm still getting the No mutationFn found warning.
Here's the code:

// App.tsx
const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
  throttleTime: 1000,
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
      staleTime: 2000,
      retry: 0,
    },
  },
});

queryClient.setMutationDefaults(trackKeys.all(), {
  mutationFn: (params) => {
    return track(params);
  },
});

function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: asyncStoragePersister }}
      onSuccess={() => {
        console.log('PersistQueryClientProvider.onSuccess');
        queryClient
          .resumePausedMutations()
          .then(() => queryClient.invalidateQueries());
      }}
    >
       ...
    </PersistQueryClientProvider>
  )
}

// useTrackMutation

export const trackKeys = {
  all: () => ['track'],
};

function useTrackMutation(options?: Options) {
  return useMutation({
    mutationKey: trackKeys.all(),
    ...options,
  });
}

Any idea of what's missing?

I'm using React native and @react-native-async-storage/async-storage for storage.

"@tanstack/query-async-storage-persister": "^4.29.5",
"@tanstack/react-query": "^4.28.0",
"@tanstack/react-query-persist-client": "^4.29.5",

[TkDodo]

your code looks like you are creating a new QueryClient inside the render function, right before the return statement?

• https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

[HugoLiconV]

@TkDodo My bad, I actually have the QueryClient outside the render function. I updated the code

[HugoLiconV]

@TkDodo I'm following this tutorial that it is pretty similar to React Query documentation.

So what I'm doing to test this is that I go offline, I call the mutation, and then close and open the app. That's where I get the warning.

I logged the AsyncStorage content and this is what I got:

{
  "REACT_QUERY_OFFLINE_CACHE": {
    "content": {
      "buster": "",
      "timestamp": 1683554968320,
      "clientState": {
        "mutations": [
          {
            "state": {
              "error": null,
              "failureCount": 0,
              "failureReason": null,
              "isPaused": true,
              "status": "loading"
            }
          },
          {
            "state": {
              "error": null,
              "failureCount": 0,
              "failureReason": null,
              "isPaused": true,
              "status": "loading"
            }
          },
          {
            "state": {
              "error": null,
              "failureCount": 0,
              "failureReason": null,
              "isPaused": true,
              "status": "loading"
            }
          }
        ],
        "queries": [
          {
            "state": {
              "data": "Hugo",
              "dataUpdateCount": 15,
              "dataUpdatedAt": 1683554959923,
              "error": null,
              "errorUpdateCount": 0,
              "errorUpdatedAt": 0,
              "fetchFailureCount": 0,
              "fetchFailureReason": null,
              "fetchMeta": {},
              "isInvalidated": false,
              "status": "success",
              "fetchStatus": "idle"
            },
            "queryKey": [
              "async-storage",
              "vin"
            ],
            "queryHash": "[\"async-storage\",\"vin\"]"
          }
        ]
      }
    }
  }
}

I don't know if it is normal that the mutations don't have a query key even when I'm setting one.

[TkDodo]

where does this tutorial actually attach a mutationKey to the mutation? Searching for mutationKey on that page yields 0 results ...

FYI, our offline example does this here:

query/examples/react/offline/src/movies.js

Line 23 in 53813e4

mutationKey: movieKeys.detail(movieId),

[HugoLiconV]

where does this tutorial actually attach a mutationKey to the mutation? Searching for mutationKey on that page yields 0 results ...

FYI, our offline example does this here:

query/examples/react/offline/src/movies.js

Line 23 in 53813e4

mutationKey: movieKeys.detail(movieId),

You're right they don't do it in the tutorial but I found the source code and they do set a mutationKey

https://github.com/benoitpaul/react-native-offline-tanstack-query/blob/main/api.ts#L165

My use case is pretty similar to theirs with their addTodoWithIdMutationFn function, except that I don't need to store anything in the cache and I don't have any queries, I just need to send data to the backend and that's it

[TkDodo]

Have a look at our offline example. It works there.

[daxaxelrod]

Wish there was a better way to bulk set mutation defaults. We're using trpc and in order to get offline to work for specific mutations I'm doing something like the following. Anyone have any ideas on how to generalize?

queryClient.setMutationDefaults(["user", "update"], {
  mutationFn: async (args) => {
    return trpc.user.update.useMutation().mutate(args);
  },
});

queryClient.setMutationDefaults(["user", "purchaseItem"], {
  mutationFn: async (args) => {
    return trpc.user.purchaseItem.useMutation().mutate(args);
  },
});