Skip to content

Commit

Permalink
docs: added draft of SWR resolver
Browse files Browse the repository at this point in the history
  • Loading branch information
imp-dance authored Sep 29, 2023
1 parent 8f1f4eb commit e3627e3
Showing 1 changed file with 56 additions and 0 deletions.
56 changes: 56 additions & 0 deletions docs/docs/Features/other-libs.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Although `rtk-query-loader` was build with `@reduxjs/toolkit` in mind, the under
[See example on CodeSandbox](https://codesandbox.io/s/tanstack-query-rtk-query-loader-example-6393w2)

```typescript
import { useQueryResult } from "@ryfylke-react/rtk-query-loader";
import {
useQuery,
UseQueryResult as TanstackUseQueryResult,
Expand Down Expand Up @@ -71,6 +72,61 @@ const loader = createLoader({

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.

## SWR

```typescript
import { UseQueryResult } from "@ryfylke-react/rtk-query-loader";
import useSWR, { SWRResponse, Key } from "swr";

const swrResolver = <TRes>(res: SWRResponse<TRes>): UseQueryResult<TRes> => {
const q = {
data: res.data,
isError: res.error ? true : false,
isLoading: res.isLoading,
isFetching: res.isLoading && res.data !== undefined,
isSuccess: res.data ? (res.error ? false : true) : false,
startedTimeStamp: new Date().getTime(),
isUninitialized: !res.isLoading && !res.data,
refetch: () => {
res.mutate();
},
currentData: res.data,
endpointName: "unknown",
originalArgs: "unknown",
requestId: "unknown",
error: res.error,
fulfilledTimeStamp: new Date().getTime()
};
console.log(q);
return q;
};

export const useSWRQuery = <TRes, TArgs extends Key>(
key: TArgs,
fetcher: (args: TArgs) => Promise<TRes>
) => {
return swrResolver(useSWR(key, fetcher));
};
```

This is how you would use it:

```typescript
import { useTanstackQuery } from "../loader-resolvers";

const loader = createLoader({
useQueries: (pokemonName?: string) => {
const pokemon = useSWRQuery(pokemonName ?? "charizard", getPokemon);

return {
queries: {
pokemon,
},
};
},
});
```

## Other libraries

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, as an npm package, or with the code embedded directly in the docs.
Expand Down

0 comments on commit e3627e3

Please sign in to comment.