stormy-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

manual-pink•16mo ago

@Gerald are you getting any error in the console about rehydrating for persistence?

stormy-goldOP•16mo ago

hi @areeb idont get any error about rehydrating

manual-pink•16mo ago

@Gerald can you try adding a cacheTime property to defaultOptions > queries and try again?

stormy-goldOP•16mo ago

@areeb isn't it gcTime?

manual-pink•16mo ago

yeah sorry I'm using v4, it should be that in the latest one.

stormy-goldOP•16mo ago

sorry, im using tanstack v5 i already set it to Infinity but still the same

manual-pink•16mo 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?

stormy-goldOP•16mo ago

@areeb bro you save my life. thank you so much!

manual-pink•16mo 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 😁

stormy-goldOP•16mo 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

Gaming

Programming

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

Did you find this page helpful?