GraphQL - ReactJS Fetch Data

Hello Everyone, in this part of the GraphQL series, we are going to fetch data using the Apollo Client package.

Create a Directory called "component" and inside it create a File named "Queries.ts" and paste this code

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

• We just created a query, passing the fields we want in our data as name, role, id, isEmployee, and age, these fields will be returned in our data.

Create another file named "Display.tsx" and paste this code.

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

• We are using the "useQuery" hook to fetch our data by passing the Query we created to the "useQuery" hook. It gives data, loading state, and error state.
• Then using the Map method, we mapped the data, also we have set the loading and error state for UI.
• Remember we can't attach this to any event handler, for that, we need "useLazyQuery" hook, which we will discuss later in the series.

In the next part of this GraphQL series, we will cover the add feature for our data 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 - [e-mail]

^^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