@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

codesandbox

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