AWS Amplify Serverless GraphQL React workshop by Nader Dabit

In this hands on workshop Amazon Developer Advocate Nader Dabit shows us how to get started with serverless GraphQL using AWS Amplify. Nader Dabit is a frequent speaker and specialized in React and React Native. He recently joined the AWS Amplify team and helps us understand how to build a back-end for our apps with serverless GraphQL. Thanks for Markus Kaiser from Amazon Munich for hosting us!
Event: React Munich Meetup on 4 September 2019 at AWS Munich HQ
www.meetup.com/de-DE/reactmun...
Speaker: Nader Dabit AWS developer advocate / dabit3
Host: Markus Kaiser, AWS Munich
Organizer: Thomas Tränkler
Video: Thomas Tränkler

[@pyrysaarinen4954]

This workshop is pure gold. Every time I think I got confused or felt like he is going a bit too fast he takes a minute to explain what is going on.

[@mohammedgt8102]

@38:30 When Nader goes into src/graphql, if you your file still show todo rather than talk, run the command "amplify codegen". This will look at the model you created earlier under my-amplify-app/amplify/backend/api/ConferenceAPI/schema and regenerate the files under my-amplify-app/src/graphql.

[@lardosian]

By the way Nader, thank you so much for this fantastic walk through, has helped me out so much!!!

[@DavidWhiteGives]

Excellent work, thank you. Notes would be good, although it is all there in the video

[@afraz-khan]

Great workshop Nader and thanks for putting the effort and create the content and whole stuff, that's helpful.

[@101appsCoZa]

Nice. Thanks!

[@saurabrakshit405]

Amazing Video !
But, I want to know how to do the Sign Up, Login & other authentication if I already have a existing backend in AWS Cognito .
And have the below details of the existing backend :-
aws_cognito_identity_pool_id:
aws_cognito_region:
aws_user_pools_id:
aws_user_pools_web_client_id:
I hope this question will generate curiosity in you.
Please make a separate vdo on this topic

[@frankkempf8783]

Well done. If you try this like me in 2023 some of the source code may not work anymore(especially imports). Is there maybe an updated link to the source with correction?
:
import { Amplify } from 'aws-amplify' - not working
use:
import { Amplify } from 'aws-amplify'
same with uuid/v4
Cheers

[@manuelapascual338]

Thanks for the content. Is there any way to connect with an already existing graphql API url?

[@jahanzaibiqbalgondal4446]

Perfect

[@agunnamdi6600]

Pls I need the link with the react hooks implementation.
I searched github for this project but I only see the class based implementation. Thanks. Awesome tutorial.

[@lardosian]

Is the code your looking for in the AppWithHooks.js file in his repo? dabit3
/
aws-appsync-react-workshop

[@itemcountinventory]

thanks guys! great talk. one question, if i wanted to reuse the exact backend for another web app or react native, can i just copy the whole backend folder or need to do all those setup again?

[@grechuli]

You can copy the stacks created in amazon aws

[@itemcountinventory]

@@grechuli yep i figured this out days ago, thanks man

[@ahnafswapnil275]

anybody facing this error while entering "amplify mock" after adding the auth category.
"Pushing to the cloud failed with the following error
Cannot read property 'iterativeRollback' of undefined"

[@markarenz2180]

With Amplify, you can do 60% of what you need to do on the backend and get it set up in about a half hour. The remaining 40% takes several months, during which time you decide Amplify won't work for your use case and rebuild with another, more customizable and extensible technology.

[@abdulbasitkhaleeq2572]

Absolutely true.

[@planirudha]

I could not fix java problem for mock api.....pl help me with this

[@georgekwilliamson]

same, i think i'll just skip over that for now

[@dhawwal9961]

Download latest version of JAVA and setup your paths for environmental variables. This should solve your problem.

[@emersonsmithperu]

More wokshop amplify and react

[@sushantbharat]

make new vedio with graphql new relationsship with aws amplify

[@andrewdeakin5796]

// src/App.js
import React, { useEffect, useReducer } from "react";
import { v4 as uuidv4 } from "uuid";
// imports from Amplify library
import { API, graphqlOperation } from "aws-amplify";
// import query definition
import { listTalks as ListTalks } from "./graphql/queries";
import { createTalk as CreateTalk } from "./graphql/mutations";
const CLIENT_ID = uuidv4();
const initialState = {
name: "",
description: "",
speakerName: "",
speakerBio: "",
talks: [],
};
function reducer(state, action) {
switch (action.type) {
case "SET_TALKS":
return {
...state,
talks: action.talks,
};
case "SET_INPUT":
return {
...state,
[action.key]: action.value,
};
case "CLEAR-INPUT":
return {
...initialState,
talks: state.talks,
};
default:
return state;
}
}
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
// execute the query in
useEffect(() => {
getData();
}, []);
const getData = async () => {
try {
const talkData = await API.graphql(graphqlOperation(ListTalks));
console.log("talkData: ", talkData);
dispatch({ type: "SET_TALKS", talks: talkData.data.listTalks.items });
} catch (err) {
console.log("Error fetching data : ", err);
}
};
const createTalk = async () => {
const { name, description, speakerBio, speakerName } = state;
if (
name === "" ||
description === "" ||
speakerBio === "" ||
speakerName === ""
)
return;
const talk = {
name,
description,
speakerBio,
speakerName,
clientId: CLIENT_ID,
};
let talks = [...state.talks, talk];
dispatch({ type: "SET_TALKS", talks });
dispatch({ type: "CLEAR INPUT" });
try {
await API.graphql(
graphqlOperation(CreateTalk, {
input: talk,
})
);
console.log("item created!");
} catch (err) {
console.log("error creating talk...", err);
}
};
const onChange = (e) => {
dispatch({ type: "SET_INPUT", key: e.target.name, value: e.target.value });
};
return (





Create Talk

{state.talks.map((talk, index) => (

index number is {index}
{talk.speakerName}
{talk.name}
{talk.description}

))}


);
};
export default App;

[@blackraider777]

it's amazing to see that Nader Dabit stil has some time for technology among the rest of the time he spends virtue signaling on twitter
what a champ

[@ricko13]

3030

[@Pikachu-oo5ro]

IM GETTING 401 UNAUTHORIZED RIGHT AFTER YOU SWITCHED TO COGNITO POOL