useFetch()
Fetch without the data rendering.
This can be useful for ensuring resources early in a render tree before they are needed.
tip
Use in combination with a data-binding hook (useCache(), useSuspense(), useDLE(), useLive()) in another component.
Usage
function MasterPost({ id }: { id: number }) {
useFetch(PostResource.get, { id });
// ...
}
Behavior
| Expiry Status | Fetch | Returns | Conditions |
|---|---|---|---|
| Invalid | yes1 | Promise | not in store, deletion, invalidation |
| Stale | yes1 | Promise | (first-render, arg change) & expiry < now |
| Valid | no | undefined | fetch completion |
| no | undefined | null used as second argument |
note
- Identical fetches are automatically deduplicated
React Native
When using React Navigation, useFetch() will trigger fetches on focus if the data is considered stale.
Conditional Dependencies
Use null as the second argument to any Data Client hook means "do nothing."
// todo could be undefined if id is undefined
const todo = useFetch(TodoResource.get, id ? { id } : null);
Types
- Type
- With Generics
function useFetch(
endpoint: ReadEndpoint,
...args: Parameters<typeof endpoint> | [null]
): Promise<any> | undefined;
function useFetch<
E extends EndpointInterface<
FetchFunction,
Schema | undefined,
undefined
>,
Args extends readonly [...Parameters<E>] | readonly [null],
>(endpoint: E, ...args: Args): ReturnType<E>;
Examples
NextJS Preload
To prevent fetch waterfalls in NextJS, sometimes you might need to add preloads to top level routes.