|
| 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