How to fetch data again?

[ftzi]

Let's say an error happened while loading all docs in a collection with useAll, like the internet went off, or I just want to fetch the new data (without useOnX). In my ScrollView, I have a refreshControl. How can I fetch the data again?

The current code of useAll is

export default function useAll<Model>(
  collection: Collection<Model>
): TypesaurusHookResult<Doc<Model>[] | undefined> {
  const [result, setResult] = useState<Doc<Model>[] | undefined>(undefined)
  const [error, setError] = useState<unknown>(undefined)
  const loading = result === undefined && !error

  const deps = [JSON.stringify(collection)]
  useEffect(() => {
    if (result) setResult(undefined)
    all(collection).then(setResult).catch(setError)
  }, deps)

  return [result, { loading, error }]
}

What I could do is on refresh set collection to null, ignore the error if collection is null, and useEffect on the error and if the collection is null, change collection to the original value.

Logically seems to work but it's quite ugly. Do you have a better idea for it?

Maybe I will create my custom useAll, that exposes a refresh prop function that just calls all(collection).then(setResult).catch(setError)

[ftzi]

This is what I've done! (and it's working flawlessly!) (Edit: it's using the alpha implementation)

export default function useAll<
  Model,
  Environment extends RuntimeEnvironment | undefined,
  ServerTimestamps extends ServerTimestampsStrategy,
>(
  collection: Collection<Model>,
  options?: AllOptionns<Environment, ServerTimestamps>,
): TypesaurusHookResult<
  AnyDoc<Model, Environment, boolean, ServerTimestamps>[] | undefined, {refresh: () => void; refreshing: boolean}
> {
  const [result, setResult] = useState<
    AnyDoc<Model, Environment, boolean, ServerTimestamps>[] | undefined
  >(undefined);
  const [error, setError] = useState<unknown>(undefined);
  const loading = result === undefined && !error;
  const [refreshing, setRefreshing] = useState(false);

  const refresh = useCallback(() => {
    if (!refreshing) {
      setRefreshing(true);
      all(collection, options).then(setResult).catch(setError).finally(() => setRefreshing(false));
    }
  }, [collection, options, refreshing]);

  const deps = [JSON.stringify(collection)];
  useEffect(() => {
    if (result) setResult(undefined);
    all(collection, options).then(setResult).catch(setError);
  }, deps);

  return [result, { loading, error, refresh, refreshing }];
}

And my react native ScrollView is basically this:

<ScrollView
  refreshControl={<RefreshControl
    refreshing={refreshing}
    onRefresh={refresh}
  />}
 >

[ftzi]

I don't know how to implement it in useInfiniteQuery.