GraphQL variables in GET request?

1

Hey guys, I’m having a bit of trouble understanding how to implement variables in GraphQL. I have it working on the removeUser function, but unsure as to how to grab the role from the user in the hook before mapping over it. I have the route setup so it is expecting a role parameter being a string.

You can see what I’m trying to do here at the top by providing the variables object, but of course data is not defined.

import React from 'react';
import { useUsersQuery, useRemoveUserMutation } from '../generated/graphql';
import { RouteComponentProps } from 'react-router-dom';

export const Admin: React.FC<RouteComponentProps> = ({ history }) => {
  const { data, loading, error } = useUsersQuery({
    fetchPolicy: 'network-only',
    variables: {
      role: data?.users.role,
    },
  });
  const [removeUser] = useRemoveUserMutation();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    console.log(error);
    return <div>You are not the admin — unauthenticated.</div>;
  }

  if (!data) {
    return <div>No data</div>;
  }

  return (
    <div>
      <h1>Admin Page</h1>
      <div>Users:</div>

      <ul>
        {data.users.map((user) => {
          return (
            <li
              key={user.id}
              onClick={async (e) => {
                e.preventDefault();
                const response = await removeUser({
                  variables: {
                    id: user.id,
                  },
                });

                if (response) {
                  history.push('/');
                  console.log(`Removed User:${user.email} ID:${user.id}`);
                }
              }}
            >
              {user.email}, {user.id}
            </li>
          );
        })}
      </ul>
    </div>
  );
};
2

Now that I’m looking at it, I was thinking maybe I have to pass the ID in the function to know who it is, but that wouldn’t really make sense either. I basically just want to read from the users table in my DB if the role of the user is set to “admin” or not. So it isn’t dependent on any ID besides the role.

3

Here is the backend query, not sure if I need it to be a mutation? But in the GraphQL playground this is working when I pass in the “admin” string as a parameter and will be rejected if anything but.

  // Query for all users
  @Query(() => [User])
  // @UseMiddleware(isAuth)
  async users(@Arg('role') role: string) {
    if (role !== 'admin') {
      throw new Error('Unauthenticated');
    } else {
      return User.find();
    }
  }