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!

Answer 2

I had also ran into a similar issue and was not really sure what was happening. There seems to be similar problem reported here - https://github.com/apollographql/graphql-tools/issues/824

We have 2 options to fix the issue. - First one is a simple fix, where in you don't make the ID mandatory when it takes only a single parameter ( which is not an object )

const GET_USER_BY_ID= gql`
  query($id: ID) {

• Second option is to use an object as a parameter instead of a primitive. I went ahead with this and it seemed to work fine for me even though I made the object and the property inside to be required. // On the client

const GET_USER_BY_ID= gql`
   query($input: GetUserInput!) {
     getUser(input: $input) {
        id
        fullName
        role
     }
}`;  
        
const { data, error } = useQuery(GET_USER_BY_ID, {
  variables: { input: { id }},
});

// In the server, define the input type

  input GetUserInput {
      id: ID!
    }