Issue with Persisting Mutations in React-Native with React-Query

[sajadghawami]

Describe the bug

Hey,

I am facing an issue with persisting mutations in a React-Native app that uses React-Query and trpc. I want to be able to persist mutations even when the app is closed, so that when the app is started again, the mutations are tried again.

I have searched for a guide or solution to this issue, but couldn't find anything. The current persist implementation only works when the app is running and has not been closed. When the app is closed and started again, all the mutation cache is lost, which does not seem like normal behavior.

I have noticed that AsyncStorage persists the calls while the app is running, and when the app goes online again, all the cached mutations are called. The only issue seems to be when the app is closed.

I am not sure if this is a trpc problem, since the case where the app is running works without a problem. I am looking for a solution to persist mutations even when the app is closed.

Your minimal, reproducible example

Can provide if needed.

Steps to reproduce

1. Go offline
2. Perform mutations
3. Confirm that mutations are cached
4. Close the app
5. Open the app
6. Observe that the cache is empty

Expected behavior

Mutations should be persisted even when the app is closed, and should be tried again when the app is started again.

Actual behaviour:

Mutation cache is lost when the app is closed, and mutations are not tried again when the app is started again.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• macOS

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

Tanstack Query adapter

react-query

TanStack Query version

4.28.0

TypeScript version

No response

Additional context

This is the current implementation of the wrapper:

export const trpc = createTRPCReact<AppRouter>();

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
});

/**
 * A wrapper for your app that provides the TRPC context.
 * Use only in _app.tsx
 */
export const TRPCProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            cacheTime: Infinity,
            retry: true,
          },
          mutations: {
            cacheTime: Infinity,
            retry: true,
          },
        },
      })
  );
  const [trpcClient] = React.useState(() =>
    trpc.createClient({
      transformer: superjson,
      links: [
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          async headers() {
            const token = await getData("token");
            return { Authorization: `Bearer ${token}` };
          },
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <PersistQueryClientProvider
        client={queryClient}
        persistOptions={{
          persister: asyncStoragePersister,
          maxAge: 1000 * 60 * 60 * 24 * 7, // 7 days
        }}
        onSuccess={() => {
          queryClient.resumePausedMutations().then(() => {
            queryClient.invalidateQueries();
          });
        }}
      >
        {children}
      </PersistQueryClientProvider>
    </trpc.Provider>
  );
};

Thanks in advance for any help or guidance on this issue.

[TkDodo]

I think we've discussed this on discord. You have to narrow down what the problem is. Could be trpc, or AsyncStorage, or react-query.

[sajadghawami]

@TkDodo

You are right.

So i have created this minimal reproducible repo:

https://github.com/sajadghawami/persist_client

The readme is also a step-for-step guide.

[trymbill]

@sajadghawami Did you per chance figure out what was going on here? I've got a similar setup and encountering the same issue, not sure if it's trpc or react query or the implementation itself.

[sajadghawami]

@trymbill unfortunately not... if you happen to find a solution, please let me know

[m4rv4ul3r]

Seems to be a react query or async-storage problem. Facing the same issue but not using trpc.

[m4rv4ul3r]

Think I found a solution. You have to create a default Mutation, otherwise it is not persisted. See: https://tanstack.com/query/latest/docs/react/guides/mutations#persisting-offline-mutations

// Define default mutation
queryClient.setMutationDefaults(['create-item'], {
  mutationFn: async (data: CreateItemData) => {
    return createItem(data);
  },
  onSettled: (_data, _err) => {
    console.log('settled item');
  },
});

Then you can call the mutation by it mutationKey. Important: If you overwrite functions like mutationFn or onSettled it's not working.

// Call the default mutation
const createItem = useMutation({ mutationKey: ['create-item'] });
createItem.mutate(data)

[TkDodo]

I think that's correct. Note that it should be persisted as well without a mutation default, but it will not be restored correctly. This is documented here: https://tanstack.com/query/v5/docs/react/guides/mutations#persisting-offline-mutations

[miteshdevg]

@sajadghawami have you found any solution

[sajadghawami]

@miteshdevg i just updated the packages and it happend to work 🤷‍♂️

[miteshdevg]

can you please tell me react-query updated version