React native query persist

[amerllica]

Describe the bug

I have implemented the react-query persist configuration on a React Native project and persist the Auth data, then I realized sometimes the user has been being kicked out and I have put some debugging there, I'm using AsyncStorage and it works well, the cause of this behavior is react-query persist configuration, I don't know maybe some of those functions have a bug because I have followed up everything strictly based on documentations v4

My App.tsx:

import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient, queryKeys } from '@helpers/query';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistQueryClient } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { SafeAreaProvider } from 'react-native-safe-area-context';

const asyncStoragePersistor = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: queryKeys.loggedInUser,
});
persistQueryClient({
  queryClient,
  persister: asyncStoragePersistor,
});

const App = (): JSX.Element => {

  return (
    <QueryClientProvider client={queryClient}>
      <SafeAreaProvider>
        <RootStack />
        <DropDownAlert />
      </SafeAreaProvider>
    </QueryClientProvider>
  );
};

Your minimal, reproducible example

https://github.com/amerllica/rq-persist-issue-reproduction

Steps to reproduce

1. Implement React Native react-query persist configuration
2. Add a console log in there to check the query data
3. If you can see the data, re-load your app several times and you will see the query data will be empty

Expected behavior

After setting the query data, the react query must contain the app data always, in every reloading by any situation until I remove the data that is related to that key.

How often does this bug happen?

Sometimes

Screenshots or Videos

No response

Platform

• OS: macOS Monterey
• React Native
• 12.4

react-query version

4.2.1

TypeScript version

v4.4.4.

Additional context

"@tanstack/query-async-storage-persister": "^4.2.1",
"@tanstack/react-query": "^4.2.1",
"@tanstack/react-query-persist-client": "^4.2.1",
"@react-native-async-storage/async-storage": "~1.17.3"

And please do not use expo, I'm using bare React Native

[TkDodo]

I have followed up everything strictly based on documentations v4

you're not using the PersistQueryClientProvider as far as I can see. The docs even outline why you shouldn't use persistQueryClient directly:
https://tanstack.com/query/v4/docs/plugins/persistQueryClient#usage-with-react

[amerllica]

Thanks for your quick answer @TkDodo, I have followed up React Native guids which is only using persistQueryClient, Even though I have tried to use PersistQueryClientProvider but I got exactly same behavior, Allways the AsyncStorage contains the react-query data but my key sometimes became empty and this makes the application unauthorized.

[amerllica]

Dear @TkDodo, I just tested my app again by using PersistQueryClientProvider, after a while by open-reopen and reloading the app the cached data for auth key was immediately removed, I don't know why it happened but definitely, the bug is on react-query persisting side not AsyncStorage, if you think you need my re-production just give me a shout here and I will create a Github repo and put here, by the way.

import { queryClient, queryKeys } from '@helpers/query';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { SafeAreaProvider } from 'react-native-safe-area-context';

const persister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: queryKeys.loggedInUser,
});

const App = (): JSX.Element => {
  orientation.lockToPortrait();

  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
      onSuccess={() => {
        SplashScreen.hide();
      }}
    >
      <SafeAreaProvider>
        <RootStack />
        <DropDownAlert />
      </SafeAreaProvider>
    </PersistQueryClientProvider>
  );
};

[TkDodo]

yeah it seems like we haven't updated the guide for createAsyncStoragePersister. Would be good if you could do that?

Can you change your expo snack reproduction to include PersistQueryClientProvider so that I can take a look at that please?

[TkDodo]

I think I can already see the issue, you are using:

const { data: signInData } = useQuery([queryKeys.loggedInUser])

but you are not providing a queryFn, and there is also no default query function defined. When we click the button, you call setQueryData, which is fine, however, background refetches might still happen, e.g. if you focus the window or if you reload the page, in which case we will hydrate from the async storage, but then trigger a background refetch because a new observer has mounted and the staleTime is zero (default value, not changed).

At that point, we'll try to fetch (with 3 retries), unsuccessfully so. Those errors should be logged to the console, but it seems there are issue with react-native and logging, see:

• V4 does not log anything in react-native even when not in production #4017

but the fetches do happen, you can see that by doing:

const { data: signInData, status, isFetching } = useQuery([queryKeys.loggedInUser])

console.log(status, isFetching)

isFetching will go to true and eventually, status will go to error because the fetch failed (missing queryFn). You'll still see the stale data on the screen, as react-query doesn't remove any data, but because the query is in error state, it will not be persisted to the async storage anymore, as the default behaviour is to only persist successful queries. You can change the default persist behaviour, but since Errors are not json serializable, you'll have to serialize them for yourself or accept that the error itself will be gone after rehydration.

Anyways, I'm not sure how realistic this reproduction is to your real scenario. But if you just disable the query or set a queryFn, I can consistently reproduce "You are in" after page reloads.

[amerllica]

@TkDodo, This is my new re-production link: https://github.com/amerllica/rq-persist-issue-reproduction

And another thing that you have mentioned: I think I made a mistake from scratch, the react-query has the main concept, keep the backend state in frontend, but user is authorized vs token is validated are different things. my base mistake was that I have thought user is authorized is a backend state, but actually, it is not.

So I should make my own Provider by using Context API to manage the pure-frontend states.

If my conclusion is correct please close this issue or tell me to close it, also I just sent a PR for docs and guides.

[TkDodo]

Yes you are correct, that is not server state. 👍