https://github.com/zeljkox/react-native-declarative-fetch
React Native Component for decalarative fetching
https://github.com/zeljkox/react-native-declarative-fetch
fetch react react-native
Last synced: 2 months ago
JSON representation
React Native Component for decalarative fetching
- Host: GitHub
- URL: https://github.com/zeljkox/react-native-declarative-fetch
- Owner: zeljkoX
- License: mit
- Created: 2018-10-15T11:36:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-23T11:03:50.000Z (over 7 years ago)
- Last Synced: 2024-04-14T15:11:31.182Z (about 2 years ago)
- Topics: fetch, react, react-native
- Language: JavaScript
- Homepage:
- Size: 113 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Declarative Fetch [IN PROGRESS]
Client - Server communication in declarative way.
## Inspiration
Inspired by Apollo GraphQL library.
## Why?
Setting fetch function on every call is tedious. Declarative code adds readability factor.
## Installation
`yarn add react-native-declarative-fetch`
## Quick Start
```javascript
import {QueryProvider, Query} from 'react-native-declarative-fetch'
export default class App extends Component {
render() {
return (
{
({data, error, loading}) => {
if (loading) {
return Loading
}
if (error) {
return Error
}
return {data}
})
}
)
}
}
```
## Props
### QueryProvider
QueryProvider takes default configuration which is used by every Query component nested inside QueryProvider.
Should be add to app top level.
key | type | Value | Description
------ | ---- | ------- | ----------------------
endpoints | Object | | Mapping of used endpoints.
defaultMethod | String | GET | Default Http method.
defaultHeaders | Object | {} | Default Http headers.
onError | Function | () => {} | Default error handler. Invoked on every Query error.
### Query
key | type | Value | Description
------ | ---- | ------- | ----------------------
method | String | GET | If not defined QueryProvider defaultMethod is used.
headers: Object | {} | If not defined QueryProvider defaultHeaders is used.
url | String | | Required field, url that is added to QueryProvider endpoint.
skip | Boolean | false | Skip fetch in React componentDidMount lifecycle method.
variables | Object | {} | Data to be used with Post request.
onError | Function | () => {} | Callback to be invoked on failed request. Fallback to QueryProvider onError callback.
};
Props passed to children function:
key | type | Value | Description
------ | ---- | ------- | ----------------------
data | Object | | Response value.
error | Boolean | | Flag to indicate query error.
loading | Boolean | | Flag to indicate ongoing request.
fetch | Function | | Conditionally fetch
## TODO
- Add tests
- Refactor code
- Fix grammar
## License
MIT License. © Željko Marković 2018