Skip to content

Commit 8eee648

Browse files
committed
docs: Added page about use with other libraries
1 parent 35e623a commit 8eee648

File tree

1 file changed

+68
-0
lines changed

1 file changed

+68
-0
lines changed

docs/docs/Advanced/other-libs.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Use with other libraries
2+
3+
You can technically use RTK Query Loader with most other similar query-fetching libraries. This is possible through the use of resolvers.
4+
5+
## Tanstack Query
6+
7+
Below is an example of a resolver for `@tanstack/react-query`:
8+
9+
```typescript
10+
import {
11+
useQuery,
12+
UseQueryResult as TanstackUseQueryResult,
13+
UseQueryOptions,
14+
} from "@tanstack/react-query";
15+
16+
const tanstackResolver = <T extends unknown>(
17+
query: TanstackUseQueryResult<T>
18+
): UseQueryResult<T> & {
19+
orignal_query: TanstackUseQueryResult<T>;
20+
} => ({
21+
isLoading: query.isLoading,
22+
isFetching: query.isFetching,
23+
isSuccess: query.isSuccess,
24+
isError: query.isError,
25+
error: query.error,
26+
data: query.data,
27+
isUninitialized: !query.isFetchedAfterMount,
28+
originalArgs: null,
29+
refetch: () => query.refetch(),
30+
currentData: query.data,
31+
endpointName: undefined,
32+
original_query: query,
33+
});
34+
35+
const useTanstackQuery = <T extends unknown>(
36+
args: UseQueryOptions<T>
37+
) => tanstackResolver(useQuery(args));
38+
```
39+
40+
This is how you would use it:
41+
42+
```typescript
43+
import { useTanstackQuery } from "../loader-resolvers";
44+
45+
const loader = createLoader({
46+
useQueries: () => {
47+
const repoData = useTanstackQuery({
48+
queryKey: ["repoData"],
49+
queryFn: () =>
50+
fetch(
51+
"https://api.github.com/repos/ryfylke-react-as/rtk-query-loader"
52+
).then((res) => res.json() as Promise<RepoDataResponse>),
53+
});
54+
55+
return {
56+
queries: {
57+
repoData,
58+
},
59+
};
60+
},
61+
});
62+
```
63+
64+
The output format will obviously be a bit different, but in this example you have access to the original query at the `.original_query` property.
65+
66+
## More libraries
67+
68+
If you are interested in creating resolvers for other libraries, you can [edit this page](https://github.com/ryfylke-react-as/rtk-query-loader/tree/main/docs/docs/Advanced/other-libs.md) and then [submit a pull request](https://github.com/ryfylke-react-as/rtk-query-loader/compare) on GitHub to share your resolver here.

0 commit comments

Comments
 (0)