[Tutorial] - How to Setup AWS Amplify GraphQL API with React

I show step by step how to create and connect a GraphQL API with your Amplify project!

CSS Code to fix Amplify UI issue:
[data-amplify-authenticator] {
max-width: 100vw !important;
}

0:00 Intro
0:21 Fix Amplify Login UI Issue
0:33 Add GraphQL API to Amplify Project
2:34 Prepare to Create Todo Item
3:15 Create Todo Item using GraphQL API
6:24 Retrieve Todo Items from GraphQL API
7:55 List Todo Items onto Page
9:35 Outro

#amplify #graphql #tutorial

😄 Want to support and help grow my channel?

☕ Love my video and want to support me?

Technology that I use for my workflow setup:

*The links above include affiliate commission or referrals.

[sbennett]

Great Video!

You do a great job of speaking the information, as well as presenting it. I would suggest, when it comes to presentation you increase the text size, and eliminate more of the blank space in the screen. From a professional standpoint, I'm pretty sure it should be no more than around 30% of the space.

[mohammedrefat]

thank you for the great tutorial i tried your code and it worked with me, but i couln't get access to my many-to-many relation data. I have a product model and the product can have multiple categories, and also a categoy model which can have mulitple products. How can i filter products that has a certain category and also the category that has a certain product. thank you

[johnbarone]

Hi, I don't know what I'm doing wrong, but I'm getting two todos when I refresh the page. 🤬 Below is my code. I've gone line-by-line with the video, and there are no significant differences between my code and the code on the screen (a variable name is different, that's all). The App and createTodoItem functions are being called only once in the code. Not sure why it is executing twice...

import { Amplify } from 'aws-amplify';
import "./App.css";

import { API, graphqlOperation } from 'aws-amplify';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';

import awsconfig from './aws-exports';
import { useEffect } from "react";


function App({ signOut, user }) {
useEffect(() => {
async function createTodoItem() {
const todo = { name: "My first todo", description: "Hello world!" };

/* create a todo */
await API.graphql(graphqlOperation(createTodo, {input: todo}));
}

createTodoItem();
}, []);
return (
<div className="App">
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</div>
);
}

export default withAuthenticator(App);