T
TanStack•14mo ago
national-gold

LocalStorage is being cleared when I go offline and refresh the browser

This is my setup of PersistQueryClient. Everytime I go offline and refresh the page the data disappeared. 
persistQueryClient({
  queryClient,
  persister,
});

queryClient.setMutationDefaults(surveyKeys.add(), {
  mutationFn: async ({ id, answer, name }: Survey) => {
    await queryClient.cancelQueries({ queryKey: surveyKeys.all() });
    await supabase.from('survey').insert([{ id, name, answer }]);
  },
});

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{ persister, maxAge: Infinity }}
  onSuccess={() => {
    queryClient.resumePausedMutations().then(() => {
      queryClient.invalidateQueries();
    });
  }}
>
  <App />
</PersistQueryClientProvider>
persistQueryClient({
  queryClient,
  persister,
});

queryClient.setMutationDefaults(surveyKeys.add(), {
  mutationFn: async ({ id, answer, name }: Survey) => {
    await queryClient.cancelQueries({ queryKey: surveyKeys.all() });
    await supabase.from('survey').insert([{ id, name, answer }]);
  },
});

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{ persister, maxAge: Infinity }}
  onSuccess={() => {
    queryClient.resumePausedMutations().then(() => {
      queryClient.invalidateQueries();
    });
  }}
>
  <App />
</PersistQueryClientProvider>
This is the localStorage value when I fetches the data 
{
    ...
    ...
    "clientState": {
        "mutations": [],
        "queries": [
            {
                "state": {
                    "data": [
                        {
                            "id": "352dcd9f-eb34-43cb-87eb-e4985db3b9e9",
                            "created_at": "2024-08-12T14:58:30.32521+00:00",
                            "name": "test",
                            "answer": "test"
                        },
                        ...
                        ...
                    ],
                    ...
                    ...
                },
                "queryKey": [
                    "surveys"
                ],
                "queryHash": "[\"surveys\"]"
            }
        ]
    }
}
{
    ...
    ...
    "clientState": {
        "mutations": [],
        "queries": [
            {
                "state": {
                    "data": [
                        {
                            "id": "352dcd9f-eb34-43cb-87eb-e4985db3b9e9",
                            "created_at": "2024-08-12T14:58:30.32521+00:00",
                            "name": "test",
                            "answer": "test"
                        },
                        ...
                        ...
                    ],
                    ...
                    ...
                },
                "queryKey": [
                    "surveys"
                ],
                "queryHash": "[\"surveys\"]"
            }
        ]
    }
}
And here when I go offline and refresh the page 
  {
    ...
    ...
    "clientState": {
        "mutations": [],
        "queries": [
            {
                "state": {
                    "data": null,
                    ...
                    ...
                },
                "queryKey": [
                    "surveys"
                ],
                "queryHash": "[\"surveys\"]"
            }
        ]
    }
}
  {
    ...
    ...
    "clientState": {
        "mutations": [],
        "queries": [
            {
                "state": {
                    "data": null,
                    ...
                    ...
                },
                "queryKey": [
                    "surveys"
                ],
                "queryHash": "[\"surveys\"]"
            }
        ]
    }
}
10 Replies
judicial-coral
judicial-coral•14mo ago
@Gerald are you getting any error in the console about rehydrating for persistence?
national-gold
national-goldOP•14mo ago
hi @areeb idont get any error about rehydrating
judicial-coral
judicial-coral•14mo ago
@Gerald can you try adding a cacheTime property to defaultOptions > queries and try again?
No description
national-gold
national-goldOP•14mo ago
@areeb isn't it gcTime?
judicial-coral
judicial-coral•14mo ago
yeah sorry I'm using v4, it should be that in the latest one.
national-gold
national-goldOP•14mo ago
sorry, im using tanstack v5 i already set it to Infinity but still the same
judicial-coral
judicial-coral•14mo ago
I'm also having some problems but for Mobile. Can you comment out the invalidateQueries part temporarily in onSuccess and let me know if that fixes it?
national-gold
national-goldOP•14mo ago
@areeb bro you save my life. thank you so much!
judicial-coral
judicial-coral•14mo ago
Reason why this was happening: upon refresh, the cache data was rehydrated properly. As soon as that was done, tanstack query carried out paused mutations (if any), followed by invalidating the cache which would clear out all the data you had 😁
national-gold
national-goldOP•14mo ago
yeah @areeb . another issue is when i set the staleTime for example 2 seconds that data are all gone during offline. and if i set it to Infinity that data is not getting the data from the remote sources

Did you find this page helpful?