DEV Community

Cover image for GraphQL - ReactJS | Update and Delete
Mysterio
Mysterio

Posted on

GraphQL - ReactJS | Update and Delete

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
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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);

...
Enter fullscreen mode Exit fullscreen mode
  • 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>;
  }

...
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode

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)