{"id":16514158,"url":"https://github.com/stevesims/async-data-access","last_synced_at":"2025-04-04T18:45:34.617Z","repository":{"id":57185567,"uuid":"147531759","full_name":"stevesims/async-data-access","owner":"stevesims","description":"React component for asynchronously fetching data","archived":false,"fork":false,"pushed_at":"2018-09-07T10:57:14.000Z","size":198,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T19:19:02.199Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stevesims.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-05T14:31:06.000Z","updated_at":"2019-12-03T23:58:42.000Z","dependencies_parsed_at":"2022-09-06T04:11:22.711Z","dependency_job_id":null,"html_url":"https://github.com/stevesims/async-data-access","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Fasync-data-access","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Fasync-data-access/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Fasync-data-access/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Fasync-data-access/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevesims","download_url":"https://codeload.github.com/stevesims/async-data-access/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234861,"owners_count":20905852,"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":[],"created_at":"2024-10-11T16:11:38.194Z","updated_at":"2025-04-04T18:45:34.588Z","avatar_url":"https://github.com/stevesims.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# async-data-access\n\n\u003e React component for asynchronously fetching data\n\n[![Travis][build-badge]][build]\n[![NPM][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n[![JavaScript Style Guide][standardjs-badge]][standardjs]\n\n[build-badge]: https://img.shields.io/travis/stevesims/async-data-access/master.svg\n[build]: https://travis-ci.org/stevesims/async-data-access\n\n[npm-badge]: https://img.shields.io/npm/v/async-data-access.svg\n[npm]: https://www.npmjs.com/package/async-data-access\n\n[coveralls-badge]: https://coveralls.io/repos/github/stevesims/async-data-access/badge.svg?branch=master\n[coveralls]: https://coveralls.io/github/stevesims/async-data-access?branch=master\n\n[standardjs-badge]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[standardjs]: https://standardjs.com\n\n## Install\n\n```bash\nnpm install --save async-data-access\n```\n\n## Usage\n\nThis component will load data asynchronously using the provided `fetch` function, and pass through status values and payload via the render-props pattern to a provided child render method.  An optional `transform` function can be given to transform the fetched response into a different format.\n\nAsyncDataAccess is agnostic about how data is fetched, with only the expectation that the fetching will be performed asynchronously.  This means that it can be written using a modern `async` function, or alternatively using a `Promise`. The fetch method can potentially make multiple API calls and gather their results together.\n\nProps accepted by this component are:\n```js\n{\n  // `fetch` is the method to fetch data\n  fetch: PropTypes.func.isRequired,\n  // `transform` method that can be used for transforms on fetched data,\n  // the intention being that `fetch` can be simple and error handling done before transforming attempted\n  transform: PropTypes.func,\n  // `onError` handler that will be called if an error occurs\n  onError: PropTypes.func,\n}\n```\n\nProps passed through to render child, with their types are:\n```js\n{\n  isFetching: PropTypes.bool,       // Flag to indicate fetch is in progress\n  didInvalidate: PropTypes.bool,    // Flag that indicates current fetch invalidated payload\n  lastFetchFailed: PropTypes.bool,  // Flag that indicates last fetch failed\n  lastError: PropTypes.string,      // String representing last error message received\n  payload: PropTypes.any,           // Payload from fetch, defaults to null\n  reload: PropTypes.func            // Function to trigger a reload\n}\n```\n\n### Example\n\n```jsx\nimport React, { Component } from 'react'\n\nimport AsyncDataAccess from 'async-data-access'\n\nclass Example extends Component {\n  fetcher = async () =\u003e {\n    // fetch data asynchronously from a server\n    return await fetch('http://example.com/movies.json')\n  }\n\n  transformer (response) {\n    // transform response to a different format (if required)\n    return response.movieList\n  }\n\n  render () {\n    return (\n      \u003cAsyncDataAccess fetch={this.fetcher} transform={this.transformer}\u003e\n        {\n          props =\u003e {\n            const { isFetching, payload } = props;\n            const movies = payload || [];\n\n            return \u003c\u003e\n              { isFetching \u0026\u0026 \u003ch2\u003eLoading data\u003c/h2\u003e }\n              {\n                movies.map(\n                  ({ title, description }) =\u003e \u003c\u003e\n                    \u003ch3\u003e{title}\u003c/h3\u003e\n                    \u003cdiv\u003e{description}\u003c/div\u003e\n                  \u003c/\u003e\n                )\n              }\n            \u003c/\u003e\n          }\n        }\n      \u003c/AsyncDataAccess\u003e\n    )\n  }\n}\n```\n\n## License\n\nMIT © [stevesims](https://github.com/stevesims)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevesims%2Fasync-data-access","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevesims%2Fasync-data-access","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevesims%2Fasync-data-access/lists"}