{"id":22973163,"url":"https://github.com/jderochervlk/remote-data-query","last_synced_at":"2025-08-13T14:33:02.412Z","repository":{"id":62908576,"uuid":"563069193","full_name":"jderochervlk/remote-data-query","owner":"jderochervlk","description":"A React hook to wrap react-query results with fp-ts-remote-data results.","archived":false,"fork":false,"pushed_at":"2024-04-15T01:21:27.000Z","size":2116,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-15T21:51:47.422Z","etag":null,"topics":["fp-ts","functional-programming","react","typescript"],"latest_commit_sha":null,"homepage":"https://jderochervlk.github.io/remote-data-query/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jderochervlk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-07T20:57:20.000Z","updated_at":"2023-08-13T17:08:54.000Z","dependencies_parsed_at":"2024-02-03T19:36:18.453Z","dependency_job_id":"92d39ae1-674f-41b9-b66b-eaf9a51576e6","html_url":"https://github.com/jderochervlk/remote-data-query","commit_stats":{"total_commits":35,"total_committers":3,"mean_commits":"11.666666666666666","dds":0.5714285714285714,"last_synced_commit":"e906b3f50c573c05b4fc77a51e170aca0be7e6f2"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jderochervlk%2Fremote-data-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jderochervlk%2Fremote-data-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jderochervlk%2Fremote-data-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jderochervlk%2Fremote-data-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jderochervlk","download_url":"https://codeload.github.com/jderochervlk/remote-data-query/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229767274,"owners_count":18121042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fp-ts","functional-programming","react","typescript"],"created_at":"2024-12-14T23:39:57.187Z","updated_at":"2024-12-14T23:39:57.796Z","avatar_url":"https://github.com/jderochervlk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @jvlk/remote-data-query\n\nWork 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/).\n\n## Installing\n\nnpm\n\n```\nnpm i @jvlk/remote-data-query typescript fp-ts\n```\n\nyarn\n\n```\nyarn add @jvlk/remote-data-query typescript fp-ts\n```\n\n## Example\n[codesandbox](https://codesandbox.io/s/jvlk-remote-data-query-example-nrz5e4?file=/src/index.tsx)\n\nYou'll need an API call that returns a `TaskEither\u003cE, Option\u003cA\u003e\u003e`. 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`.\n\n\u003e Note: Your application must be wrapped with a [`QueryClientProvider`](https://tanstack.com/query/v4/docs/reference/QueryClientProvider).\n\n```tsx\nimport * as O from 'fp-ts/Option'\nimport * as TE from 'fp-ts/TaskEither'\nimport * as t from 'io-ts'\nimport { fold, useRemoteDataQuery } from '@jvlk/remote-data-query'\nimport { safeFetchJson } from '@jvlk/fp-ts-fetch'\nimport { flow, pipe } from 'fp-ts/function'\nimport React from 'react'\n\nfunction fetchRandomStrings() {\n  return pipe(\n    safeFetchJson(`https://baconipsum.com/api/?type=meat-and-filler`),\n    TE.map(flow(O.fromNullable))\n  )\n}\n\nexport default function App() {\n  const randomData = useRemoteDataQuery({\n    queryFn: fetchRandomStrings(),\n    queryKey: ['random-string'],\n    decoder: t.array(t.string), // this is optional, but recommended\n  })\n\n  return fold(\n    randomData,\n    () =\u003e \u003cp\u003eloading...\u003c/p\u003e,\n    (e) =\u003e \u003cp\u003eThere was an error: {JSON.stringify(e)}\u003c/p\u003e,\n    () =\u003e \u003cp\u003eNo text found.\u003c/p\u003e,\n    (text) =\u003e (\n      \u003c\u003e\n        {text.map((line, i) =\u003e (\n          \u003cp key={`${line.slice(0, 5)}-${i}`}\u003e{line}\u003c/p\u003e\n        ))}\n      \u003c/\u003e\n    )\n  )\n}\n```\n\n## Using with `fp-ts`\n\nYou 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\u003ct.Errors\u003e`, and instead of the hook returning a `Success\u003cunknown\u003e` you will get the type of the `decoder` you use. The above example returns `Success\u003cstring\u003e`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjderochervlk%2Fremote-data-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjderochervlk%2Fremote-data-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjderochervlk%2Fremote-data-query/lists"}