I need to store a value, asynchronously, offline. Can this be done?

[AlexFrazer]

Here's the idea: I have a very large network request, but it is performed conditionally since the data doesn't change much. I do this by obtaining a unique identifier (a string) from the server that will be saved to local storage. My query looks as follows:

function useValidationSchemaHashQuery() {
  return useQuery('validation_schema_hash', fetchValidationSchemaHash, {
    // use the one found in local storage if it exists.
    initialData: ()=> window.localStorage.getItem('validation_schema_hash'),
    onSuccess: data => window.localStorage.setItem('validation_schema_hash', data),
  });
}

All is well and good here. So this allows me to really conveniently do an "offline" stale-while-refetch like behavior. However, in my other query for the actual validation schema, I want to, by default, use an offline version loaded asynchronously from some async storage. In this case, I am using localForage.

So, I basically do the following in my main query:

function useValidationSchemaQuery() {
  const { data: hash } = useValidationSchemaHashQuery();
  return useQuery(['validation-schema', hash], fetchValidationSchema, {
    // dependent query: only run it if the hash is fetched or cached.
    enabled: !!hash,
    // the initial data should be loaded from cache as a "stale" value until it can be rehydrated
    initialData: () => localForage.getItem('validation_schema'),
    // when this is done, sync the updated results to the cache.
    onSuccess: data => localForage.setItem('validation_schema', data),
  });
}

Now here's the weird catch: the localForage version is actually asynchronous. I want to fetch and sync with the async storage when the query changes, and also default to initially using async storage. The "unresolved initial" value can just be null

Is this possible to do?

[TkDodo]

initialData is currently synchronous, not sure if it's easily possible to make it async. I guess one problem would be that the fetch-function itself could resolve before the initialData, which could be handled, but then you'd loose the advantage of being able to not show a hard loading state, because there is a time when both the fetchFn and the initialData are not yet resolved ...

Since react-query is promise-based, you could build a dependent query in user-land by making a useQuery that reads from the localForage and build something like this:

function useValidationSchemaQuery() {
  const { data: hash } = useValidationSchemaHashQuery();
  const { data: initialData } = useQuery(['validation-schema', 'initialData'], () => localForage.getItem('validation_schema'))

  return useQuery(['validation-schema', hash], fetchValidationSchema, {
    enabled: !!hash && !!initialData,
    initialData,
    onSuccess: data => localForage.setItem('validation_schema', data),
  });
}

you would still need to hande the state where both queries are not-yet loaded, but I think this should work.

[AlexFrazer]

that looks like a really good idea