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".

Chisholm

That hook looks correct, so I suspect it's either a bug with react-apollo or something else is going on with your code. If you log the value of id to the console inside the component, is it defined? – Tourane

Yes that's correct, the id logs as expected. – Chisholm

test in playground version with variables ... check with name User after query: query User($id: ID!) { getUser .... – Chrysanthemum

@Chrysanthemum hmm it's not liking the variables there either. I guess that would mean it's an issue with my server? I'm running typeorm and type-graphql. – Chisholm

how playground/docs defines ID type ? – Chrysanthemum

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!

Chisholm

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 input type as a parameter instead of a primitive. The input type and id property can both be required in this case. // 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!
    }

Jacquline

I tried this solution, however unfortunately I am still getting the error that my variable is not being provided a runtime value. – Chisholm

Answer 3

Try

const { data, error } = useQuery(GET_USER_BY_ID, { id });

Rufena

Answer 4

try using Number(params) or String(params) depends on your input type

Altarpiece