Full Stack Apollo GraphQL With React and Node: Part 9 - Mutations With Apollo Client

#GraphQL #Reactjs #NodeJS

This is the ninth in a series of videos focusing on building a full-stack app with Apollo and GraphQL. In this video we use the `useMutation` custom hook provided by Apollo to execute a login mutation from a login page. Then we use local state to check whether or not a user is logged in. If not, we redirect them to the login page.

Social Media:

[lamsungfai]

Hi Will
I prefer to handle those login logic in back-end rather than in front-end. It seems more secure. btw, thank you so much for the series. Gain a lot for it. I will try more projects by using Apollo library:)))
Happy Chinese New Year.
Hammer

[lamsungfai]

Hi Will
I have a problem that I don't know how to pass the variable to useQuery by using useState hook. Every time I type the character in the input box and I need to put my mouse to the input box again to type. It's so tired for me. May I have a better workaround for this? Please see the code below.

import gql from "graphql-tag";
import React, { useState } from "react";
import LangInput from "../components/LangInput";


const USER = gql`
query user($email: String!) {
user(email: $email) {
username
email
position
}
}
`;


export default () => {
const [email, setEmail] = useState("");
const { data, loading, error } = useQuery(USER, {
variables: {
email: email
}
});


if (loading) return
if (error) return <p>An error occurred</p>;


if (data) console.log("data", data);


const searchHandler = e => e.preventDefault();
return (
<div
className="container mb-5 py-5"
style={window.innerWidth > 490 ? { marginTop: 180 } : { marginTop: 214 }}
>
<h1 className="text-center
<p className="text-center">

</p>
<form onSubmit={searchHandler}>
<div className="row">
<div className="form-group col-md-9">
<input
className="form-control form-control-underlined"
type="text"

value={email}
onChange={e => setEmail(e.target.value)}
/>
</div>
<div className="form-group col-md-3">
<button
className="btn btn-primary rounded-pill btn-block shadow-sm"
type="submit"
>
{LangInput("search")}
</button>
</div>
</div>
</form>


<table className="table table-hover table-borderless mb-5 py-5">
<thead className="thead-dark">
<tr>
<th scope="col"> {LangInput("username")}</th>
<th scope="col"> {LangInput("email")}</th>
<th scope="col"> {LangInput("position")}</th>
</tr>
</thead>
<tbody>
{/* {data && data.user ? (
<tr>
<td>{data.user.username}</td>
<td>{data.user.email}</td>
<td>{data.user.position}</td>
</tr>
) : (
<tr></tr>
)} */}
</tbody>
</table>
</div>
);
};


Big Thank you
Hammer

[kroloskar]

Nice video but not about Mutations... you should change the misleading title ;)