useDLE() - [D]ata [L]oading [E]rror
High performance async data rendering without overfetching. With fetch meta data.
In case you cannot use suspense, useDLE() is just like useSuspense() but returns [D]ata [L]oading [E]rror values.
useDLE()
will rerender when its data mutates.
Usage
ProfileResource
ProfileList
import { useDLE } from '@data-client/react'; import { ProfileResource } from './ProfileResource'; function ProfileList(): JSX.Element { const { data, loading, error } = useDLE(ProfileResource.getList); if (error) return <div>Error {`${error.status}`}</div>; if (loading || !data) return <>loading...</>; return ( <div> {data.map(profile => ( <div className="listItem" key={profile.pk()}> <Avatar src={profile.avatar} /> <div> <h4>{profile.fullName}</h4> <p>{profile.bio}</p> </div> </div> ))} </div> ); } render(<ProfileList />);
🔴 Live Preview
Store▶
Behavior
Expiry Status | Fetch | Data | Loading | Error | Conditions |
---|---|---|---|---|---|
Invalid | yes1 | undefined | true | false | not in store, deletion, invalidation, invalidIfStale |
Stale | yes1 | denormalized | false | false | (first-render, arg change) & expiry < now |
Valid | no | denormalized | false | maybe2 | fetch completion |
no | undefined | false | false | null used as second argument |
note
- Identical fetches are automatically deduplicated
- Hard errors to be caught by Error Boundaries
Conditional Dependencies
Use null
as the second argument on any reactive data client to indicate "do nothing."
// todo could be undefined if id is undefined
const todo = useDLE(TodoResource.get, id ? { id } : null);
Types
- Type
- With Generics
function useDLE(
endpoint: ReadEndpoint,
...args: Parameters<typeof endpoint> | [null]
): {
data: Denormalize<typeof endpoint.schema>;
loading: boolean;
error: Error | undefined;
};
function useDLE<
E extends EndpointInterface<FetchFunction, Schema | undefined, undefined>,
Args extends readonly [...Parameters<E>] | readonly [null],
>(
endpoint: E,
...args: Args
): {
data: DenormalizeNullable<typeof endpoint.schema>;
loading: boolean;
error: Error | undefined;
};