fascinating-indigo

How to stop a certain key from being stored in async storage?

Hello, forgive me if this has been documented elsewhere. I was wondering if there is a way to make it so certain keys don't get persisted into the async storage for caching? I tried providing cacheTime and staleTime as 0 but I can still see it in the cache. My use case is pretty weird. I have react-query in a chrome extension (if you are unfamiliar, think react-native application). I have the network requests cached to the async storage so that the values I want are available offline. On top of this ^, I like react-queries api, hooks, suspense, etc, so I'm also using it to interface with the async storage itself! So for example if the user changes their settings, I call a mutation which just does await AsyncStorage.set(). Likewise, I read from the async storage with a query. I dont want these being cached because it means that anytime I read, it will then proceed to be written again by the async persistor from the paragraph above. I do want to retain the fact that if there are two instances of useQuery with the same key, they share the same data. ^ Any ideas how to stop the additional write? I have the following ideas: 1. There is some prop that I don't know that I need to set to stop it from going into the cache. 2. Update the createAsyncStoragePersister's setItem to just ignore certain keys 3. I'm crazy for trying to use useQuery to access async storage especially when the react-query is being cached into async storage 😂

19 Replies

secure-lavender•3y ago

Hi. We did a PoC with local storage persister some times ago. We used meta option to flag the queries we would like to store. Code is here: https://codesandbox.io/s/dkpu8

GLabat

CodeSandbox

react-query-some-queries-to-localstorage - CodeSandbox

Example on how to use local storage persistor to dehydrate only some queries

secure-lavender•3y ago

Note this was done in RQ v3 so APi might have changed since

fascinating-indigoOP•3y ago

Wow that worked! Is this the right way? "right"

secure-lavender•3y ago

🤷‍♂️😅 @TkDodo 🔮 ?

rival-black•3y ago

using shouldDehydrateQuery is definitely the right way. If you want to find the queries to store via the meta field or something else is up to you. Please note that with v4, you'd want to use the <PersistQueryClientProvider> instead of calling persistQueryClient manually. also, note that shouldDehydrateQuery per default is implemented to only persist successful queries. If you use your own logic, you likely want to incorporate that check as well, because persisting loading / error queries it not only pointless, but also not easily possible because Errors are not json serializable.

fascinating-indigoOP•3y ago

Yep got the first part! Not sure I follow the second part, I just have this:

shouldDehydrateQuery: (query) => {
      const isStorable = (query.meta?.storable as boolean) ?? true;
      return isStorable;
    },

shouldDehydrateQuery: (query) => {
      const isStorable = (query.meta?.storable as boolean) ?? true;
      return isStorable;
    },

Are you saying that shouldDehydrateQuery by default has something else inside that I need to copy over? Ah yeah I see "The default version only includes successful queries, do shouldDehydrateQuery: () => true to include all queries" Looks like I need to add query.state.status === 'success'. I wonder if it would be useful to link to in the docs

rival-black•3y ago

yeah that's the default implementation: https://github.com/TanStack/query/blob/357ec041a6fcc4a550f3df02c12ecc7bcdefbc05/packages/query-core/src/hydration.ts#L72-L74

GitHub

query/hydration.ts at 357ec041a6fcc4a550f3df02c12ecc7bcdefbc05 · Ta...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - query/hydration.ts at 357ec041a6fcc4a5...

rival-black•3y ago

feel free to link it in the docs

fascinating-indigoOP•3y ago

I can update the docs! Do you think it would be valuable to just export the function to be used by people? I.e. return isSortable && defaultShouldDehydrateQuery() where defaultShouldDehydrateQuery is imported from react-query?

rival-black•3y ago

yeah we can do that

secure-lavender•3y ago

👌 And do you think having a codesandbox example be worth it? To illustrate one implementation ?

fascinating-indigoOP•3y ago

Awesome, I can make a PR 🙂

secure-lavender•3y ago

Could contribute if needed

fascinating-indigoOP•3y ago

https://github.com/TanStack/query/pull/4751 Draft PR up, Im not sure if I need to write tests or anything but feedback welcome!

rival-black•3y ago

looks good - prettier is failing though 🙂

fascinating-indigoOP•3y ago

My bad, pushed a fix Any idea why the test is failing?

rival-black•3y ago

sorry for that, it's random test flakiness that I didn't have time to get around to yet One thing that bothers me a tiny bit is the bundle size increase in this PR, presumably because defaultShouldDehydrateQuery was local and could be minified before, but now it can't because it's a public interface 🤔

fascinating-indigoOP•3y ago

Whats the size increase? I was looking in the test for the size and im not sure what the diff is

rival-black•3y ago

It doesn't show a diff, only an absolute size. It's just 0.02kb larger than main. Maybe we can rename those functions ?

Gaming

Programming

How to stop a certain key from being stored in async storage?

Did you find this page helpful?