Skip to content

Commit 70f7a47

Browse files
imp-danceimp-dance
committed
Merge branch 'main' of github.com:imp-dance/rtk-query-loader
2 parents 9867c54 + b6f0d1e commit 70f7a47

File tree

1 file changed

+2
-153
lines changed

1 file changed

+2
-153
lines changed

‎README.md‎

Lines changed: 2 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -88,156 +88,5 @@ What if we could instead "join" these queries into one, and then just return ear
8888
- [x] Better type certainty
8989
- [x] Easy to write re-usable loaders that can be abstracted away from the components
9090

91-
# Exports
92-
93-
## createLoader
94-
95-
Creates a `Loader`.
96-
97-
```typescript
98-
const userRouteLoader = createLoader({
99-
queries: () => {
100-
const { userId } = useParams();
101-
const userQuery = useGetUser(userId);
102-
return [userQuery] as const;
103-
},
104-
transform: (queries) => ({
105-
user: queries[0].data,
106-
}),
107-
});
108-
```
109-
110-
#### Argument object:
111-
112-
| Property | Interface | Description |
113-
|----------------------|------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
114-
| **queries**? | `(arg?: T) => readonly UseQueryResults[]` | Returns a `readonly` array of useQuery results. **This function is a hook**, which means that you can use other hooks, like `useLocation`, in it. |
115-
| **transform**? | `(queries: readonly UseQueryResult[], deferredQueries: readonly UseQueryResult[]) => T` | Transforms the list of queries to the desired loader output format. (Is also given deferredQueries as second argument) |
116-
| **queriesArg**? | `(props: T) => A` | Creates an argument for the queries function based on expected props. Useful when you have queries in your loader that need arguments from the props of the component. |
117-
| **deferredQueries**? | `(arg?: T) => readonly UseQueryResults[]` | Queries that should not affect the component-state (loading/error/success). Component might render before these are fulfilled. Like `queries`, **this function is a hook**, which means that you can use other hooks, like `useLocation`, in it. |
118-
| **onLoading**? | `(props: T) => ReactElement` | |
119-
| **onError**? | `(props: T, error: RTKError) => ReactElement` | |
120-
| **onFetching**? | `(props: T, Component: (() => ReactElement)) => ReactElement` | Make sure you call the second argument as a component, not a function. |
121-
| **whileFetching**? | `{ append?: (props: P, data?: R) => ReactElement; prepend?: (props: P, data?: R) => ReactElement; }` | By using this instead of `onFetching`, you ensure that you don't reset the internal state of the component while fetching. |
122-
123-
## withLoader
124-
125-
Wraps a component to provide it with loader data.
126-
127-
```tsx
128-
const postsLoader = createLoader(...);
129-
130-
const Component = withLoader(
131-
(props: Props, loaderData) => {
132-
// Can safely assume that loaderData and props are populated.
133-
const posts = loaderData.posts;
134-
135-
return posts.map(,,,);
136-
},
137-
postsLoader
138-
)
139-
140-
```
141-
142-
#### Arguments
143-
144-
1. `(props: P, loaderData: R) => ReactElement`
145-
Component with loader-data
146-
2. `Loader`
147-
Return value of `createLoader`.
148-
149-
## createUseLoader
150-
151-
Creates only the hook for the loader, without the extra metadata like loading state.
152-
153-
Basically just joins multiple queries into one, and optionally transforms the output. Returns a standard RTK useQuery hook.
154-
155-
A good solution for when you want more control over what happens during the lifecycle of the query.
156-
157-
```tsx
158-
const useLoader = createUseLoader({
159-
queries: (arg: string) =>
160-
[
161-
useQuery(arg.query),
162-
useOtherQuery(arg.otherQuery),
163-
] as const,
164-
transform: (queries) => ({
165-
query: queries[0].data,
166-
otherQuery: queries[1].data,
167-
}),
168-
});
169-
170-
const Component = () => {
171-
const query = useLoader();
172-
173-
if (query.isLoading) {
174-
return <div>loading...</div>;
175-
}
176-
//...
177-
};
178-
```
179-
180-
## Deferring queries
181-
182-
You can defer queries by using the `deferredQueries` argument in `createLoader` (or `createUseLoader`). These queries are passed as the second argument to `transform` which has to be used to access the deferred queries in your loaded component.
183-
184-
Example usage:
185-
186-
```tsx
187-
const loader = createLoader({
188-
queries: () => [useImportantQuery()] as const,
189-
deferredQueries: () => [useSlowButNotImportantQuery()] as const,
190-
transform: (queries, deferredQueries) => ({
191-
important: queries[0].data,
192-
not_important: deferredQueries[0].data,
193-
}),
194-
});
195-
196-
const Component = withLoader((props, loaderData) => {
197-
const { important, not_important } = loaderData;
198-
// not_important could be undefined
199-
200-
return (
201-
<div>
202-
{important.person.name}
203-
{not_important ? "it has resolved : "some fallback"}
204-
</div>
205-
)
206-
}, loader);
207-
```
208-
209-
## InferLoaderData
210-
211-
Infers the type of the data the loader returns. Use:
212-
213-
```typescript
214-
const loader = createLoader(...);
215-
type LoaderData = InferLoaderData<typeof loader>;
216-
```
217-
218-
Typescript should infer the loader data type automatically inside `withLoader`, but if you need the type elsewhere then this could be useful.
219-
220-
# Extending loaders
221-
222-
You can extend a loader like such:
223-
224-
```tsx
225-
const baseLoader = createLoader({
226-
onLoading: () => <Loading />,
227-
});
228-
229-
const pokemonLoader = baseLoader.extend({
230-
queries: (name: string) => [useGetPokemon(name)],
231-
queriesArg: (props: PokemonProps) => props.name.toLowerCase(),
232-
});
233-
```
234-
235-
New properties will overwrite existing.
236-
237-
It's worth mentioning that `queries` and `transform` are linked in this context, meaning that if you supply a new `queries` argument in the extended loader, but no `transform`, then you will **not** inherit the `transform` from the original loader. You either overwrite both or none of these.
238-
239-
* Supplying _just_ a new `queries` argument will result in `transform` being `undefined` in practise.
240-
* Supplying _just_ a new `transform` argument will result in the new transform being ignored.
241-
* Supplying a new `transform` _and_ a new `queries` argument will properly overwrite the existing base properties.
242-
243-
All other properties in the loader will overwrite as expected. You can, for example, just supply a new `onLoading`, or `onError`.
91+
## [Documentation](https://rtk-query-loader.ryfylke.dev)
92+
## [Quick Guide](https://rtk-query-loader.ryfylke.dev/Quick%20Guide/)

0 commit comments

Comments
 (0)