initialData from AsyncStorage

[daveteu]

I'm handling offline capabilities and using AsyncStorage for most of my data.

I've modified https://gist.github.com/derindutz/179990f266e25306601dd53b8fbd8c6a to store SWR in the AsyncStorage successfully.

However, when app is offline, I want SWR to load from cache instead so there are 2 methods I can think of so far

Method 1, return cache in catch of fetch

fetch(url).catch((err) => {
 //if network fail
return await AsyncStorage(url);
})

However with the above method, the retry capability of SWR is gone since it did not throw any errors.

So my question comes from the 2nd method. I want to load initialData from async storage instead.

so I did..

export const getStorage = async (url) => {
	
	const result = await AsyncStorage(url)
    return new Promise ((resolve, reject) => {
	
		resolve(isJSON(result) ? JSON.parse(result) : result)
	});
}

then in my functional component

const FunctionalComponent = () => {
     const { currentUser } = useAuth();
     const { data: initialData } = useSWR( currentUser.uid ? ['/api/information', currentUser.uid] : null, getStorage)
     //I want info from here to load from cache first
    const { data, mutate, error } = useSWR( currentUser.uid && !isUndefined(initialData) ? ['/api/information', currentUser.uid] : null, fetcher, { initialData })
}
}

However, in the final line, the data and error is forever undefined.

[sergiodxa]

You could throw the data from AsyncStorage, that way SWR will keep retrying but your will get the data as the error.