@jvlk/remote-data-query
Work with responses from @tanstack/react-query using @jvlk/fp-ts-remote-data and fp-ts.
Installing
npm
npm i @jvlk/remote-data-query typescript fp-ts
yarn
yarn add @jvlk/remote-data-query typescript fp-ts
Example
You'll need an API call that returns a TaskEither<E, Option<A>>. You can use safeFetchJson from @jvlk/fp-ts-fetch and then parse the results using O.fromNullable.
Note: Your application must be wrapped with a
QueryClientProvider.
import * as O from 'fp-ts/Option'
import * as TE from 'fp-ts/TaskEither'
import * as t from 'io-ts'
import { fold, useRemoteDataQuery } from '@jvlk/remote-data-query'
import { safeFetchJson } from '@jvlk/fp-ts-fetch'
import { flow, pipe } from 'fp-ts/function'
import React from 'react'
function fetchRandomStrings() {
return pipe(
safeFetchJson(`https://baconipsum.com/api/?type=meat-and-filler`),
TE.map(flow(O.fromNullable))
)
}
export default function App() {
const randomData = useRemoteDataQuery({
queryFn: fetchRandomStrings(),
queryKey: ['random-string'],
decoder: t.array(t.string), // this is optional, but recommended
})
return fold(
randomData,
() => <p>loading...</p>,
(e) => <p>There was an error: {JSON.stringify(e)}</p>,
() => <p>No text found.</p>,
(text) => (
<>
{text.map((line, i) => (
<p key={`${line.slice(0, 5)}-${i}`}>{line}</p>
))}
</>
)
)
}
Using with fp-ts
You can pass a decoder from io-ts to parse the data that is returned from the API request. This is optional, but I highly encourage you to do this! Any errors returned from io-ts will return a Failure<t.Errors>, and instead of the hook returning a Success<unknown> you will get the type of the decoder you use. The above example returns Success<string>.
5 Jan 2, 2023
17 Dec 29, 2022
1.4k Jan 9, 2023
28 Nov 11, 2022
96 Nov 27, 2022
16 Nov 7, 2022
4 Sep 16, 2022
9 Oct 5, 2022
36 Dec 15, 2022
29 Nov 4, 2022
2 Nov 24, 2021
4 Dec 28, 2022
299 Dec 14, 2022
10 Aug 30, 2021
4 Nov 22, 2022
2.3k Dec 30, 2022
4 Oct 10, 2021
283 Dec 13, 2022
10 Oct 7, 2022