Apollo Client is not reading variables passed in using useQuery hook

Question

Having a weird issue passing variables into the useQuery hook.

The query:

const GET_USER_BY_ID= gql`
  query($id: ID!) {
    getUser(id: $id) {
      id
      fullName
      role
    }
  }
`;

Calling the query:

const DisplayUser: React.FC<{ id: string }> = ({ id }) => {
  const { data, error } = useQuery(GET_USER_BY_ID, {
    variables: { id },
  });

  return <div>{JSON.stringify({ data, error })}</div>;
};

Rendering the component:

<DisplayUser id="5e404fa72b819d1410a3164c" />

This yields the error:

"Argument \"id\" of required type \"ID!\" was provided the variable \"$id\" which was not provided a runtime value."

Calling the query from GraphQL Playground returns the expected result:

{
  "data": {
    "getUser": {
      "id": "5e404fa72b819d1410a3164c",
      "fullName": "Test 1",
      "role": "USER"
    }
  }
}

And calling the query without a variable but instead hard-coding the id:

const GET_USER_BY_ID = gql`
  query {
    getUser(id: "5e404fa72b819d1410a3164c") {
      id
      fullName
      role
    }
  }
`;

const DisplayUser: React.FC = () => {
  const { data, error } = useQuery(GET_USER_BY_ID);

  return <div>{JSON.stringify({ data, error })}</div>;
};

Also returns the expected result.

I have also attempted to test a similar query that takes firstName: String! as a parameter which also yields an error saying that the variable was not provided a runtime value. This query also works as expected when hard-coding a value in the query string.

This project was started today and uses "apollo-boost": "^0.4.7", "graphql": "^14.6.0", and "react-apollo": "^3.1.3".

Answer 1

[Solved]

In reading through the stack trace I noticed the issue was referencing graphql-query-complexity which I was using for validationRules. I removed the validation rules and now everything works! Granted I don't have validation at the moment but at least I can work from here. Thanks to everyone who took the time to respond!