Hello Everyone, in this part of the GraphQL series, we are going to perform update and delete operations for our data using the useMutation hook.
Firstly install the react-icons package by running this command as we are going to use some icons
npm i react-icons
We have already added the update user query in our "Queries.ts" file, now add this delete user query at the bottom of that file
export const DELETE_USER = gql`
mutation DeleteUser($delUser: DeleteUser!) {
deleteUser(delUser: $delUser) {
id
}
}
`;
Updating Display.tsx file
- In Display.tsx file that we have created in fetch data blog, update the imports as below
import { useQuery, useMutation } from "@apollo/client";
import { ALL_USERS, DELETE_USER } from "./Queries";
import { memo } from "react";
import { MdDeleteForever } from "react-icons/md";
import { BsFillPenFill } from "react-icons/bs";
import { useCounterStore } from "./UsersList";
Accessing the states
...
const DisplayData = () => {
const setId = useCounterStore((state) => state.setId);
const setName = useCounterStore((state) => state.setName);
const setAge = useCounterStore((state) => state.setAge);
const setRole = useCounterStore((state) => state.setRole);
const setIsEmployee = useCounterStore((state) => state.setIsEmployee);
const setIsUpdate = useCounterStore((state) => state.setIsUpdate);
...
- We are accessing all the fields setter methods, so when we click the update icon, we are going to set all the field values with the current value
- setUpdate will be used to set the button state either Add or Update.
Creating delete method with useMutation hook
...
const { data, loading, error } = useQuery<{ users: User[] }>(ALL_USERS);
const [deleteUser] = useMutation(DELETE_USER, {
refetchQueries: [{ query: ALL_USERS }],
});
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Some Error Occurred...</p>;
}
...
- Here we have deleteUser method which will accept 1 param, id, to find a user and delete it, also we are using refetch option to reflect the changes in real time.
Updating UI
...
return (
<main className="px-5 mt-10">
<h1 className="text-slate-900 text-center text-lg font-bold">All Users</h1>
<section className="mt-10">
<div className="flex gap-6 justify-center flex-wrap mt-3">
{data &&
data.users.length === 0 ? <h1 className="text-xl font-bold"> No User Found</h1> :
data?.users.map((user: User) => {
return (
<div
key={user.id}
className="flex flex-col justify-between group border border-blue-400 rounded-lg w-60 p-4
hover:bg-slate-900 hover:border-none hover:outline hover:outline-blue-400 hover:outline-offset-4
transition ease-in-out"
>
<div>
<h1 className="text-xl font-bold group-hover:text-slate-100">
Name: {user.name}
</h1>
<p className="group-hover:text-blue-200">
Role: {user.role}
</p>
<p className="group-hover:text-violet-200">
Age: {user.age}
</p>
<p
className={`${
user.isEmployee.toString() === "true"
? "group-hover:text-green-200"
: "group-hover:text-red-200"
}`}
>
Employee: {user.isEmployee.toString()}
</p>
</div>
<div className="mt-4 flex gap-4 items-center">
<button
className="text-red-500"
onClick={() => {
console.log(user.id);
deleteUser({
variables: {
delUser: {
id: user.id,
},
},
});
}}
>
<MdDeleteForever size="1.2rem" color="#e65252" />
</button>
<button
className="text-blue-500"
onClick={() => {
setId(Number(user.id));
setName(user.name);
setAge(user.age);
setIsEmployee(user.isEmployee);
setRole(user.role);
setIsUpdate(true);
}}
>
<BsFillPenFill size="1rem" color="#64a9f9" />
</button>
</div>
</div>
);
})}
</div>
</section>
</main>
);
}
export default memo(DisplayData)
- All the inputs fields are same as before, we just wrapped all the inputs in a div.
- We now have 2 new buttons, 1 for delete user, so we will pass the id inside the delete method param to delete a user, which in our case is "user.id" as we are in a map method to map the users
- For update button, we are just setting the states with the current user details and also setting "isUpdate" state to true to use the update form, the update method we have already discussed in previous part of this series.
Complete code
import { useQuery, useMutation } from "@apollo/client";
import { ALL_USERS, DELETE_USER } from "./Queries";
import { memo } from "react";
import { MdDeleteForever } from "react-icons/md";
import { BsFillPenFill } from "react-icons/bs";
import { useCounterStore } from "./UsersList";
interface User {
name: string;
role: string;
id: string;
isEmployee: boolean;
age: number;
}
const DisplayData = () => {
const setId = useCounterStore((state) => state.setId);
const setName = useCounterStore((state) => state.setName);
const setAge = useCounterStore((state) => state.setAge);
const setRole = useCounterStore((state) => state.setRole);
const setIsEmployee = useCounterStore((state) => state.setIsEmployee);
const setIsUpdate = useCounterStore((state) => state.setIsUpdate);
const { data, loading, error } = useQuery<{ users: User[] }>(ALL_USERS);
const [deleteUser] = useMutation(DELETE_USER, {
refetchQueries: [{ query: ALL_USERS }],
});
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Some Error Occurred...</p>;
}
return (
<main className="px-5 mt-10">
<h1 className="text-slate-900 text-center text-lg font-bold">All Users</h1>
<section className="mt-10">
<div className="flex gap-6 justify-center flex-wrap mt-3">
{data &&
data.users.length === 0 ? <h1 className="text-xl font-bold"> No User Found</h1> :
data?.users.map((user: User) => {
return (
<div
key={user.id}
className="flex flex-col justify-between group border border-blue-400 rounded-lg w-60 p-4
hover:bg-slate-900 hover:border-none hover:outline hover:outline-blue-400 hover:outline-offset-4
transition ease-in-out"
>
<div>
<h1 className="text-xl font-bold group-hover:text-slate-100">
Name: {user.name}
</h1>
<p className="group-hover:text-blue-200">
Role: {user.role}
</p>
<p className="group-hover:text-violet-200">
Age: {user.age}
</p>
<p
className={`${
user.isEmployee.toString() === "true"
? "group-hover:text-green-200"
: "group-hover:text-red-200"
}`}
>
Employee: {user.isEmployee.toString()}
</p>
</div>
<div className="mt-4 flex gap-4 items-center">
<button
className="text-red-500"
onClick={() => {
console.log(user.id);
deleteUser({
variables: {
delUser: {
id: user.id,
},
},
});
}}
>
<MdDeleteForever size="1.2rem" color="#e65252" />
</button>
<button
className="text-blue-500"
onClick={() => {
setId(Number(user.id));
setName(user.name);
setAge(user.age);
setIsEmployee(user.isEmployee);
setRole(user.role);
setIsUpdate(true);
}}
>
<BsFillPenFill size="1rem" color="#64a9f9" />
</button>
</div>
</div>
);
})}
</div>
</section>
</main>
);
}
export default memo(DisplayData)
In the next part of this GraphQL series, we are going to create a search component for searching a user using "useMutation" hook.
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/website-components-you-should-know-25nm
https://dev.to/shubhamtiwari909/smooth-scrolling-with-js-n56
https://dev.to/shubhamtiwari909/swiperjs-3802
https://dev.to/shubhamtiwari909/custom-tabs-with-sass-and-javascript-4dej
Top comments (0)