GraphQL - ReactJS 获取数据

大家好，在 GraphQL 系列的这一部分中，我们将使用 Apollo 客户端包来获取数据。

创建一个名为“component”的目录，并在其中创建一个名为“Queries.ts”的文件并粘贴此代码

// Queries.ts
export const ALL_USERS = gql`
  query Users {
    users {
      name
      role
      id
      isEmployee
      age
    }
  }
`;

我们刚刚创建了一个查询，将我们想要在数据中包含的字段传递为名称、角色、id、isEmployee 和年龄，这些字段将在我们的数据中返回。
创建另一个名为“Display.tsx”的文件并粘贴此代码。

// Display.tsx
import { useQuery } from "@apollo/client";
import { ALL_USERS } from "./Queries";
import { memo } from "react";

interface User {
  name: string;
  role: string;
  id: string;
  isEmployee: boolean;
  age: number;
}

const DisplayData = () =>  {
  const { data, loading, error } = useQuery<{ users: User[] }>(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>
              );
            })}
        </div>
      </section>
    </main>
  );
}

export default memo(DisplayData)

我们使用“useQuery”钩子通过将我们创建的查询传递给“useQuery”钩子来获取数据。它提供数据、加载状态和错误状态。
然后使用Map方法，我们映射了数据，并且我们还设置了UI的加载和错误状态。
请记住，我们不能将其附加到任何事件处理程序，为此，我们需要“useLazyQuery”挂钩，我们将在本系列后面讨论。