https://github.com/jderochervlk/remote-data-query

A React hook to wrap react-query results with fp-ts-remote-data results.
https://github.com/jderochervlk/remote-data-query

fp-ts functional-programming react typescript

Last synced: 27 days ago
JSON representation

A React hook to wrap react-query results with fp-ts-remote-data results.

• Host: GitHub
• URL: https://github.com/jderochervlk/remote-data-query
• Owner: jderochervlk
• License: mit
• Created: 2022-11-07T20:57:20.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-15T01:21:27.000Z (9 months ago)
• Last Synced: 2024-11-15T21:51:47.422Z (about 2 months ago)
• Topics: fp-ts, functional-programming, react, typescript
• Language: TypeScript
• Homepage: https://jderochervlk.github.io/remote-data-query/
• Size: 2.02 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @jvlk/remote-data-query

Work with responses from [`@tanstack/react-query`](https://tanstack.com/) using [`@jvlk/fp-ts-remote-data`](https://jderochervlk.github.io/fp-ts-remote-data/) and [`fp-ts`](https://gcanti.github.io/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](https://codesandbox.io/s/jvlk-remote-data-query-example-nrz5e4?file=/src/index.tsx)

You'll need an API call that returns a `TaskEither>`. You can use [`safeFetchJson`](https://jderochervlk.github.io/fp-ts-fetch/modules/safeFetchJson.ts.html) from `@jvlk/fp-ts-fetch` and then parse the results using `O.fromNullable`.

> Note: Your application must be wrapped with a [`QueryClientProvider`](https://tanstack.com/query/v4/docs/reference/QueryClientProvider).

```tsx

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,

    () => 
loading...
,

    (e) => 
There was an error: {JSON.stringify(e)}
,

    () => 
No text found.
,

    (text) => (

      <>

        {text.map((line, i) => (

          
{line}

        ))}

      >

    )

  )

}

```


## Using with `fp-ts`

You can pass a `decoder` from [`io-ts`](https://gcanti.github.io/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`, and instead of the hook returning a `Success` you will get the type of the `decoder` you use. The above example returns `Success`.