asyncStoragePersistor for React Native

[Aung-Myint-Thein]

Implementation

I looked at the createLocalStoragePersistor and just changed a few lines and necessary imports. Please feel free to suggest if there is anything I should change or improve.

How to use

import {asyncStoragePersistor} from './utility/createAsyncStoragePersistor';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 48, // 48 hours
      staleTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
});

const storagePersistor = asyncStoragePersistor({
  asyncStorageKey: 'AsyncStorageReactQuery', // asyncStorageKey vs localStorageKey
  throttleTime: 1000,
});

persistQueryClient({
  queryClient,
  persistor: storagePersistor,
  maxAge: 1000 * 60 * 60 * 24, // 24 hours in milliseconds
});

How to test

Use some queries to get the data. Restart the React Native app. We should see the UIs with previously called queries immediately without needing to call the APIs.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/A3EyaNQsLHX5dPi8hA8NDXxqSaCX
✅ Preview: https://react-query-git-fork-aung-myint-thein-asyn-4979ec-tannerlinsley.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 279faaa:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

[TkDodo]

looks good, but could you please streamline it with the other plugins, meaning:

• typescript
• add to tsconfig.types.json
• docs for the plugins
• package.json
• add it to the rollup config

basically, if you search for createLocalStoragePersistor-experimental everywhere, you'll see what you'll need to add :)

[Aung-Myint-Thein]

looks good, but could you please streamline it with the other plugins, meaning:

• typescript
• add to tsconfig.types.json
• docs for the plugins
• package.json
• add it to the rollup config

basically, if you search for createLocalStoragePersistor-experimental everywhere, you'll see what you'll need to add :)

Added docs for plugins. Sorry, I am not a type script person and.. not very familiar with all the rollup config... :(

[TkDodo]

no worries. I think I can check out the branch and add some commits I guess?

[Aung-Myint-Thein]

Please feel free to add more commits. I can verify that the code is working coz I am running the codes now and tested a few times by restarting the app and can confirm querycache data is there.

[arnaudbzn]

@TkDodo @Aung-Myint-Thein We are going to test this PR as well in the coming days. We'll keep you updated if we have any issues or comments.

[TkDodo]

can you please update your fork and branch with the latest release, as we've now made some changes to the webstorageplugin and I would like to avoid conflicts

[TMaszko]

I'm not sure whether we should use throttle here because setItem is async so probably we want to return this promise as well :)

[TkDodo]

73a20c4

[TkDodo]

build fails because:

Cannot find module '@react-native-community/async-storage' or its corresponding type declarations.

How are we going to go about this please? I'd rather not add this as a peerDependency. Maybe it's better to change the interface to pass the actual AsyncStorage as a parameter to asyncStoragePersistor ? We've done something similar to the WebStoragePersistor...

[TMaszko]

@TkDodo What about async setItem ?

[TkDodo]

@TkDodo What about async setItem ?

Yes, we'd need something as a parameter that has an async getItem and an async setItem method :)

[TkDodo]

we'd need something as a parameter that has an async getItem and an async setItem method :)

tried that here: 0612612

[TMaszko]

k, but we cannot just not throttle, can we? we can make it an async function to have it always return a Promise?

I think so :D

[TMaszko]

@TkDodo we could use smth like p-throttle https://github.com/sindresorhus/p-throttle wdyt?

[TkDodo]

@TkDodo we could use smth like p-throttle https://github.com/sindresorhus/p-throttle wdyt?

what would be the drawback of just using the normal throttle that doesn't return anything?

[TMaszko]

@TkDodo Probably, there we could run into some race conditions. I mean one operation could be faster than the other one but the order is not maintained on JS side, but on the otherhand saveClient is called by the subscribe method and it's not "awaited" at all...

[TMaszko]

I came up with this https://gist.github.com/TMaszko/a6b9cb876340569c7daf8d520509d3c0

[tannerlinsley]

This is all looking really good. I think the changes to make things more flexible is the right move. Inverting control out of the API to the user is always a good decision, same way we did it with the other web storage api's.

Keep cruisin'!

[TkDodo]

@TMaszko thanks, I used your asyncThrottle implementation instead of throttle here: 73a20c4

dismissing because I implemented lots of it myself :)

[dan-lee]

I created a third-party module for this exact purpose a while ago: https://github.com/dan-lee/react-query-native-persist

It can handle multiple storage backends (with the help of adapters). Maybe this can serve as inspiration regarding @tannerlinsley's point in his last comment. I'd also be willing to contribute if wanted.

[TkDodo]

@TMaszko @Aung-Myint-Thein the PR would be good to go from my side, but I haven't really tested it. If someone can make a quick test with AsyncStorage, and maybe as well with localForage to see if it's compatible with the api, that would be much appreciated

[TMaszko]

@TkDodo I've already tested AsyncStorage persistor in the project but in the form of custom persistor (gist code) and It was working correctly.

[idanavr]

When will it be merged?

[tannerlinsley]

🎉 This PR is included in version 3.18.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀