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.