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.

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.



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


You can check the project on GitHub repository:

10 repositories, 6 followers.

Na DNX Brasil, rabalhamos para trazer uma melhor experiência em nuvem e aplicações para empresas nativas digitais.

Trabalhamos com foco em AWS, Well-Architected Solutions, Containers, ECS, Kubernetes, Integração Contínua/Entrega Contínua e Malha de Serviços.

Estamos sempre em busca de profissionais experiêntes em cloud computing para nosso time, focando em conceitos cloud-native.

Confira nossos projetos open-souce em e siga-nos no Twitter, Linkedin or YouTube.

Tenha informações das últimas previsões e atualizações tecnológicas


Sem spam - apenas novidades, atualizações e informações técnicas.

Related Posts