aws-amplify-react-hooks
AWS Amplify react && react-native hooks
Installation
npm install aws-amplify-react-hooks
Or if using yarn
yarn add aws-amplify-react-hooks
Example
git clone git@github.com:react-native-village/aws-amplify-react-hooks.gitcd examples/reactNativeCRUDyarnreact-native run-iosreact-native run-android
API
AmplifyProvider
Similar to
ApolloProvider from react-apollo.
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
const client = Auth API graphqlOperation const App = <AmplifyProvider client=client> <AppNavigator /> </AmplifyProviderc>
useQuery
const data: Array<mixed> loading: string error: string
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
const Jobs = { const data loading error = if loading return <Text>Loading...</Text> if error return <Text>Error! error</Text> return <> data </> }
Flatlist with pagination
const Jobs = { const data loading error fetchMore = const _renderItem = { return <Text>itemposition</Text> } const _keyExtractor = objid if loading return <Text>Loading...</Text> if error return <Text>Error! error</Text> return <> <FlatList scrollEventThrottle=16 data=data renderItem=_renderItem keyExtractor=_keyExtractor onEndReachedThreshold=05 onEndReached=fetchMore /> </> }
useMutation
const setCreate: Promise<{}> setUpdate: Promise<{}> setDelete: Promise<{}> loading: string error: string =
setCreate
setUpdate
setDelete
- Functions CREATE, UPDATE, DELETE
loading
- Loading indicator.
error
- Error.
input
- Mutation value.
const Jobs = { const input setJob = const setCreate setUpdate setDelete loading error = const onCreate = async { const obj = await console } const onUpdate = async await const onDelete = async await if loading return <Text>Loading...</Text> if error return <Text>Error! error</Text> return <> <Button title="CREATE" onPress=onCreate /> </> }