{"id":16820374,"url":"https://github.com/techniq/react-fetch-component","last_synced_at":"2025-04-05T23:12:51.757Z","repository":{"id":17020763,"uuid":"81014651","full_name":"techniq/react-fetch-component","owner":"techniq","description":"React component and hook to declaratively fetch data","archived":false,"fork":false,"pushed_at":"2022-12-08T07:32:52.000Z","size":766,"stargazers_count":158,"open_issues_count":21,"forks_count":21,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T22:09:06.086Z","etag":null,"topics":["fetch","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/techniq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-05T19:01:17.000Z","updated_at":"2024-09-28T18:42:33.000Z","dependencies_parsed_at":"2023-01-11T19:29:53.485Z","dependency_job_id":null,"html_url":"https://github.com/techniq/react-fetch-component","commit_stats":null,"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-fetch-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-fetch-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-fetch-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-fetch-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techniq","download_url":"https://codeload.github.com/techniq/react-fetch-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411243,"owners_count":20934654,"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":["fetch","react"],"created_at":"2024-10-13T10:56:27.253Z","updated_at":"2025-04-05T23:12:51.730Z","avatar_url":"https://github.com/techniq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-fetch-component [![CircleCI](https://circleci.com/gh/techniq/react-fetch-component.svg?style=svg)](https://circleci.com/gh/techniq/react-fetch-component)\n\nReact component to declaratively [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) data\n\n## Install\n\n```\nyarn add react-fetch-component\n```\n\nor\n\n```\nnpm install --save react-fetch-component\n```\n\n## Usage\n\nYou supply a single function as a child of `\u003cFetch /\u003e` which receives a single argument as an object. The function will be called anytime the state of the fetch request changes (for example, before a request has been made, while the request is in flight, and after the request returned a response).\n\nWhile you can pass a single property to the function (for example, `(fetchProps) =\u003e ...`), it is common to instead use object destructuring to peel off the properties on the object you plan to use.\n\nAn example of destructing and using the most common properties `loading`, `error`, and `data`.\n\n```js\n\u003cFetch url=\"someUrl\"\u003e\n  {({ loading, error, data }) =\u003e (\n    \u003cdiv\u003e\n      {loading \u0026\u0026\n        {\n          /* handle loading here */\n        }}\n      {error \u0026\u0026\n        {\n          /* handle error here */\n        }}\n      {data \u0026\u0026\n        {\n          /* handle data here */\n        }}\n    \u003c/div\u003e\n  )}\n\u003c/Fetch\u003e\n```\n\nYou can also use React's context via `\u003cFetch.Consumer\u003e` for accessing the state in a deep tree (or to create components based on state)\n\n```js\nconst Loading = () =\u003e \u003cFetch.Consumer\u003e{({ loading }) =\u003e loading ? \u003cMySpinner /\u003e : null}\u003c/Fetch.Consumer\u003e\nconst Error = () =\u003e \u003cFetch.Consumer\u003e{({ error }) =\u003e error ? \u003cMyError error={error} /\u003e : null}\u003c/Fetch.Consumer\u003e\n\n\u003cFetch url=\"someUrl\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        \u003cLoading /\u003e\n        \u003cError /\u003e\n        \u003cFetch.Consumer\u003e\n          {({ data }) =\u003e \u003cdiv\u003e{ data ? /* handle data here */ : null}\u003c/div\u003e}\n        \u003c/Fetch.Consumer\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/Fetch\u003e\n```\n\n## Props\n\n- `url` (string) - address of the request. Initial fetch will only be created when it's a non-empty string. You can initially set this to `undefined`, `false`, or an empty string to delay the fetch to a later render.\n- `options` (object|function) - request options such as `method`, `headers`, `credentials`, etc. If passed as a function, it will not be evaluated until the request is sent, which is useful when calling expensive methods like `JSON.stringify` for `options.body` for example.\n  - see [Request properties](https://developer.mozilla.org/en-US/docs/Web/API/Request#Properties) for all available options.\n- `as` - declare how to handle the response body\n  - default: `auto` (will attempt to parse body based on `Content-Type` header)\n  - can either be a string for any of the [body methods](https://developer.mozilla.org/en-US/docs/Web/API/Body#Methods) including:\n    - `arrayBuffer`\n    - `blob`\n    - `formData`\n    - `json`\n    - `text`\n  - or a `function` that takes in the `response` and returns a `Promise`. For example `\u003cFetch as={res =\u003e res.text()} /\u003e`\n  - or an `object` that maps the `Content-Type` of the response to a function that takes in the `response` and returns a `Promise`. For example `\u003cFetch as={{ 'application/json': res =\u003e JSON.parse(res.text(), customReviver)}} /\u003e`. `html`, `json`, `xml`, and `other` are also available for simplification.\n- `cache` (boolean|object)\n  - If set, will cache responses by `url` and return values from cache for matches urls without issues another request. Useful for typeahead features, etc.\n  - If `true`, will use an instance of `SimpleCache` per component instance\n  - Can supply an instance with `get(url)` and `set(url, promise)` methods. Passing an instance of `SimpleCache` allows for multiple instances to share the same (simple) cache\n  - Other implementations of a cache can be supplied for more control (LRU, persist to local/sessionStorage, etc)\n  - default: `false`\n- `manual` (boolean) - If `true`, requires calling `fetch` explicitly to initiate requests. Useful for better control of POST/PUT/PATCH requests.\n  - default: `false`\n- `onDataChange` (function) - Function called only when data is changed. It is called before `onChange`, and if a result is returned (i.e. not `undefined`), this value will be used as `data` passed to `onChange` and the child function instead of the original data. `onDataChange` also receives the current data as the second parameter, which allows for concatenating data (ex. infinity scroll).\n- `onChange` (function) - Function called with same props as child function. Useful to call `setState` (or dispatch a redux action) since this is not allowed within `render`. `onChange` will always be called even if `\u003cFetch /\u003e` component has been unmounted.\n  - default: `undefined`\n- `fetchFunction` (function) - Specify own fetch function. Useful to debounce fetch requests (although probably best to debounce outside of `\u003cFetch /\u003e` so not call unneccessary renders)\n  - default: `window.fetch`\n\n## Object properties passed to child function\n\n- `loading`\n  - Set to `true` while request is in flight\n  - Set to `false` once response has returned\n  - Set to `null` when `manual={true}` before `fetch()` is called\n- `error`\n  - Is `undefined` while request is pending\n  - Will be set to the parsed response body (`json` by default) if `!response.ok` (i.e. status \u003c 200 || status \u003e= 300)\n  - Will be set to an `Error` instance if thrown during the request (ex. CORS issue) or if thrown while attemping to parse the response body, such as returning text/html when `json` was expected (which is the default parser)\n  - Will remain `undefined` if neither of the previous occur\n- `data`\n  - Is `undefined` while request is pending\n  - Set to parsed response body (`json` by default) unless one of the `error` conditions occur\n- `request`\n  - Set to an object containing the props passed to the component (`url`, `options`, etc) when request is sent.\n  - Added for convenience when `\u003cFetch /\u003e` is wrapped by your own data component (ex. `\u003cUserData /\u003e`)\n- `response`\n  - Set to the [response](https://developer.mozilla.org/en-US/docs/Web/API/Response) of the `fetch` call\n  - Useful to check the status code/text, headers, etc\n- `fetch`\n  - Function that can be called to create a new fetch request (useful when last request had an error or you want to manually refresh the data (see `manual` prop))\n  - The first 2 parameters match `window.fetch` (`url`, `options`). A third parameter (`updateOptions`) is available to pass options to the update phase (where `onChange`, `onDataChange`, and the child render function is called). Currently only 1 option is available (`ignorePreviousData`) which passes `undefined` as the current data (second parameter) to `onDataChange`, which is useful when using `onDataChange` to concatenate data across requests (ie. infinite loading) and the query changes\n- `clearData`\n\n  - Function to clear data state.\n\n## Examples\n\n### Include credentials\n\n```js\n\u003cFetch url=\"someUrl\" options={{ credentials: 'include' }}\u003e\n  {/* ... */}\n\u003c/Fetch\u003e\n```\n\nMore interactive examples on [CodeSandbox](https://codesandbox.io/s/Z6R7OrOgQ)\n\n## See also\n\n- [react-odata](https://github.com/techniq/react-odata) - uses `\u003cFetch /\u003e` for OData endpoints\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Freact-fetch-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechniq%2Freact-fetch-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Freact-fetch-component/lists"}