I am trying to cache items that get pulled from a Firebase database, I'm using React Native.
Getting and posting data works fine, the problem happens when trying to cache the data.
When internet gets turned off it shows the error:
@firebase/firestore: Firestore (8.2.2): Connection webchannel transport errored: [object, Object]'
when trying to cache.
For caching I use the "@react-native-async-storage/async-storage": "~1.15.0", library.
In the code below I get data and store it. When the internet is turned off the product stays visible for a few seconds then it throws the error and disappears.
The intended behaviour for this code is that the item stays on screen even when internet is off.
How do I fix this problem? Or is there a better way to sort out caching?
async function getSelfMadeItems() {
let list = [];
if (getIsConnected === true) {
let snapshot = await firestore
.collection("SelfMadeProducts")
.where("UserUID", "==", user.uid)
.orderBy("MadeOn", "asc")
.limit(5)
.get()
.then(async (querySnapshot) => {
querySnapshot.forEach((doc) => {
list.push({
MadeOn: doc.data().MadeOn.toDate().toDateString(),
//ImageUri: doc.data().ImageUri,
id: doc.id,
});
});
try {
const jsonValue = JSON.stringify(list);
if (!querySnapshot.empty) {
await AsyncStorage.setItem("@SelfMade", jsonValue);
}
} catch (e) {
console.log(e);
}
setproductsState(list);
});
} else {
try {
const ItemValue = await AsyncStorage.getItem("@SelfMade");
if (ItemValue !== null) {
const jsonValue = await AsyncStorage.getItem("@SelfMade");
console.log("Json", JSON.parse(jsonValue));
}
jsonValue != null ? setproductsState(JSON.parse(jsonValue)) : null;
} catch (e) {
console.log(e);
}
}```
