GraphQL - ReactJS Fetch Data
Tags: graphql, react, javascript, webdev
Published: 2023-07-13 12:07:26

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

```js
// 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.
```js
// 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 - 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