Offline cache

Learn the offline cache strategy.

Offline cache

An offline cache keeps network data in local storage; when the user is offline it shows this data. You store the data as key-value with AsyncStorage; when the network request succeeds you both show the data on the screen and write it to the cache.

The flow is: first read the cache (fast display), then make the network request. When the network succeeds you write the new data to the cache and update the screen; when it fails you keep showing the old data in the cache. This pattern ensures the user always sees some content. The cache can also be limited with a time-to-live (TTL); very old data is reloaded.

Cache flow

An offline cache flow consists of these steps: first read the data from the cache and show it on the screen immediately. Then try the network request; if it succeeds write the new data both to the cache and update the screen. If the network fails keep the data in the cache.

This flow is also known as 'stale-while-revalidate'; the user first sees the old data, then it updates if new data arrives. When writing to AsyncStorage the value must be a string; to store an object you convert it to a string with JSON.stringify. When reading you convert it back to an object with JSON.parse. This conversion is the foundation of the cache flow.

Exercise Write the cache flow

Complete the fetchWithCache function. First read the cache with const cached = await AsyncStorage.getItem('user_data'). Show it with if (cached) setData(JSON.parse(cached)). Then try the network with const fresh = await fetchUser(). On success write to cache with await AsyncStorage.setItem('user_data', JSON.stringify(fresh)) and update with setData(fresh). fetchUser and setData are passed as parameters.

Show example solution

const cached = await AsyncStorage.getItem('user_data');
if (cached) setData(JSON.parse(cached));
try {
  const fresh = await fetchUser();
  await AsyncStorage.setItem('user_data', JSON.stringify(fresh));
  setData(fresh);
} catch (e) {
  // network error; cache is preserved
}

Test yourself

Write the cache read function

const cached = await AsyncStorage.____('user_data');

Show answer

const cached = await AsyncStorage.getItem('user_data');

What is used when writing an object to AsyncStorage?
```
await AsyncStorage.setItem('key', ???(data))
```
- JSON.parse
- toString
- JSON.stringify
- String
Show answer

JSON.stringify — JSON.stringify converts an object to a string.
Match each step to its purpose

getItem

Reads cache
setItem

Writes to cache
JSON.stringify

Converts to string
JSON.parse

Converts to object

Next lesson: Sync

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies