GraphQL- reactjs更新和删除-DEV365 开发者社区

大家好，在GraphQl系列的这一部分中，我们将使用USEMoint Hook进行更新和删除数据。

首先通过运行此命令安装React-Icons软件包，因为我们将使用某些图标

npm i react-icons

我们已经在“ queries.ts”文件中添加了更新用户查询，现在在该文件的底部添加此删除用户查询

export const DELETE_USER = gql`
  mutation DeleteUser($delUser: DeleteUser!) {
    deleteUser(delUser: $delUser) {
      id
    }
  }
`;

更新display.tsx文件

在我们在获取数据博客中创建的display.tsx文件中，更新导入如下

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

访问美国

...


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

...

我们正在访问所有字段设置器方法，因此，当我们单击“更新图标”时，我们将使用当前值
设置将用于设置按钮状态添加或更新。

使用USEMUNT挂钩创建删除方法

...

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

...

在这里，我们有Deleteuser方法，该方法将接受1个参数，ID，查找用户并删除它，我们也使用Refetch选项来实时反映更改。

更新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)

所有输入字段都与以前相同，我们只是包装了Div的所有输入
我们现在有2个新按钮，1个用于删除用户，因此我们将在删除方法参数中传递ID来删除用户，在我们的情况下，该用户是“用户”用户
对于更新按钮，我们只是设置了具有当前用户详细信息的状态，并将“ isupdate”状态设置为true以使用更新表单，我们已经在本系列的上一部分中讨论过的更新方法。

完成代码

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)

在此GraphQl系列的下一部分中，我们将创建一个搜索组件，以使用“ USEMOUNT”挂钩搜索用户。
感谢您检查此帖子
您可以与我联系 -
Instagram -https://www.instagram.com/supremacism__shubh/
LinkedIn -https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件-shubhmtiwri00@gmail.com

^^您可以在下面的链接上为我提供一些捐款，谢谢^^^
- > https://www.buymeacoffee.com/waaduheck < -

也检查这些帖子
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