Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-native-village/aws-amplify-react-hooks
AWS Amplify react-native hooks
https://github.com/react-native-village/aws-amplify-react-hooks
Last synced: about 13 hours ago
JSON representation
AWS Amplify react-native hooks
- Host: GitHub
- URL: https://github.com/react-native-village/aws-amplify-react-hooks
- Owner: react-native-village
- Created: 2019-11-30T19:23:21.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T00:03:08.000Z (almost 2 years ago)
- Last Synced: 2024-11-14T12:20:34.844Z (4 days ago)
- Language: JavaScript
- Homepage:
- Size: 30.3 MB
- Stars: 47
- Watchers: 4
- Forks: 12
- Open Issues: 75
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# aws-amplify-react-hooks
AWS Amplify react-native hooks (Only React Native)
# Installation
`npm install aws-amplify-react-hooks`
Or if using [yarn](https://yarnpkg.com/en/)
`yarn add aws-amplify-react-hooks`
# Example
```bash
git clone [email protected]:react-native-village/aws-amplify-react-hooks.git
cd examples/reactNativeCRUD
yarn
react-native run-ios
react-native run-android
```
# API
[AmplifyProvider](https://github.com/react-native-village/aws-amplify-react-hooks#amplifyprovider)
[useQuery](https://github.com/react-native-village/aws-amplify-react-hooks#usequery)
[useMutation](https://github.com/react-native-village/aws-amplify-react-hooks#usemutation)
## AmplifyProvider
Similar to
[ApolloProvider from react-apollo](https://www.apollographql.com/docs/react/get-started/#connect-your-client-to-react).
In order for this package to work, you need to wrap your component tree with
`AmplifyProvider` at an appropriate level, encapsulating all components which
will use hooks.
### Usage
```javascript
import React from 'react'
import { AmplifyProvider } from 'aws-amplify-react-hooks'
import { Auth, API, graphqlOperation } from 'aws-amplify'
const client = {
Auth,
API,
graphqlOperation
}
AmplifyProvider(client)
const App = () => (
)
render(, document.getElementById('root'))
```
## useQuery
```javascript
const {
data: Array,
loading: string,
error: string,
fetchMore: function
} = useQuery(query {}, options: { variables: {[key: string]: any }}, queryData: Array)
```
`query` - The first argument is a GraphQL query READ operation, the second is a CREATE subscription operation, the third is an UPDATE subscription operation and the fourth is a DELETE subscription operation.
`option` - An object containing all the variables that your request should fulfill.
`queryData` - An array of GraphQL operation names in the READ, CREATE, UPDATE, DELETE sequence.
`data` — The returned data array.
`loading` - Loading indicator.
`error` - Error.
`fetchMore` - Often in your application there will be some views in which you need to display a list that contains too much data so that it can either be retrieved or displayed immediately. Pagination is the most common solution to this problem, and the useQuery hook has built-in functionality that makes it pretty simple. The easiest way to do pagination is to use the fetchMore function, which is included in the result object returned by the useQuery hook. This basically allows you to make a new GraphQL query and combine the result with the original result.
### Simple example
```javascript
import React from 'react'
import { View, Text } from 'react-native'
import { useQuery, getNames } from 'aws-amplify-react-hooks'
import { listJobs } from '../../graphql/queries' // from Amplify autogenerate file
import { onCreateJob, onUpdateJob, onDeleteJob } from '../../graphql/subscriptions' // from Amplify autogenerate file
const Jobs = () => {
const { data, loading, error } = useQuery(
{
listJobs,
onCreateJob,
onUpdateJob,
onDeleteJob
},
{
variables: { limit: 5 }
},
getNames({ listJobs, onCreateJob, onUpdateJob, onDeleteJob })
)
if (loading) {
return Loading...
}
if (error) {
return Error! {error}
}
return (
<>
{data.map(item => (
{item.position}
))}
>
)
}
```
### Flatlist with pagination
```javascript
import React from 'react'
import { View, Text, FlatList } from 'react-native'
import { useQuery, getNames } from 'aws-amplify-react-hooks'
import { listJobs } from '../../graphql/queries' // from Amplify autogenerate file
import { onCreateJob, onUpdateJob, onDeleteJob } from '../../graphql/subscriptions' // from Amplify autogenerate file
const Jobs = () => {
const { data, loading, error, fetchMore } = useQuery(
{
listJobs,
onCreateJob,
onUpdateJob,
onDeleteJob
},
{
variables: { limit: 5 }
},
getNames({ listJobs, onCreateJob, onUpdateJob, onDeleteJob })
)
const _renderItem = ({ item }) => {
return {item.position}
}
const _keyExtractor = obj => obj.id.toString()
if (loading) {
return Loading...
}
if (error) {
return Error! {error}
}
return (
<>
>
)
}
```
## useMutation
```javascript
const [
setCreate: Promise<{}>,
setUpdate: Promise<{}>,
setDelete: Promise<{}>
{
loading: string,
error: string
}
] = useMutation(input: {})
```
`setCreate` `setUpdate` `setDelete` - Functions CREATE, UPDATE, DELETE
`loading` - Loading indicator.
`error` - Error.
`input` - Mutation value.
```javascript
import React, { useState } from 'react'
import { View, Text, Button } from 'react-native'
import { useMutation } from 'aws-amplify-react-hooks'
import { createJob, updateJob, deleteJob } from '../../graphql/mutations' // from Amplify autogenerate file
const Jobs = () => {
const [input, setJob] = useState({
position: '',
rate: '',
description: ''
})
const [setCreate, setUpdate, setDelete, { loading, error }] = useMutation(input)
const onCreate = async () => {
const obj = await setCreate(createJob)
console.log('obj', obj)
}
const onUpdate = async () => (await setUpdate(updateJob))
const onDelete = async () => (await setDelete(deleteJob))
if (loading) {
return Loading...
}
if (error) {
return Error! {error}
}
return (
<>
>
)
}
```