React w/ Hooks + Amplify + GraphQL

Photo of a man in a hat and glasses with a graphic of React w_ Hooks, AWS Amplify, and GraphQL logos

React w/ Hooks + Amplify + GraphQL

The launch of Hooks in React 16.8 made managing state simple, but most of the documentation is written using Redux examples, such as Amplify API for React.

So for those who are learning React with Hooks without leveraging Redux, a simple example using Amplify + React w/ Hooks + GraphQL is more than welcome, so this Todo application will help you to understand how to perform a simple CRUD using Amplify with Hooks.
*On this article we assume that you understand React components and props.

However, I highly recommend new javascript developers to master Redux basics component lifecycle in order to translate most of the examples that you will find in documentations.

Trust me it will save you time, well here is the example:

First things first, create your react-app

npx create-react-app my-app
cd my-app
npm start

Secondly, install Amplify

npm install -g @aws-amplify/cli
amplify configure

Then set up your back-end

amplify init

Create your API and push it

amplify add api
amplify push

Great! We have our back-end live and now we can leverage the beauty of React w/ Hooks.

Create your Handles to list, add and delete your todos.

Create your components, our application imports react-strap for styling but you can keep it simple and use pure JSX.

Hooks!
We have our functions and now its time to add state to our component.

In order to refresh our todo list during the component Lifestyle use useEffect and include your query your todo list into our useEffect hook.

Give to useEffect an empty array as the second argument, If you don’t pass an array into the useEffect Hook, your component will continuously reload repeatedly.

♾️

Result:

Play around and check how simple is to manage your component state using Hooks!

🙂

You can check the project on GitHub repository:

wvxavier?tab=repositories
10 repositories, 6 followers.

At DNX Solutions, we work to bring a better cloud and application experience for digital-native companies in Australia.

Our current focus areas are AWS, Well-Architected Solutions, Containers, ECS, Kubernetes, Continuous Integration/Continuous Delivery and Service Mesh.

We are always hiring cloud engineers for our Sydney office, focusing on cloud-native concepts.

Check our open-source projects at https://github.com/DNXLabs and follow us on Twitter, Linkedin or Facebook.