CODEWITHSUNDEEP
reactjsgraphqlapollo-client
Nich Secord
Nich Secord

Reputation: 171

Apollo Client is not reading variables passed in using useQuery hook

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

Upvotes: 9

Views: 6096

Answers (4)

Sushanth --
Sushanth --

Reputation: 55750

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!
    }

Upvotes: 4

SREE
SREE

Reputation: 11

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

Upvotes: 0

Davo
Davo

Reputation: 566

Try

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

Upvotes: 0

Nich Secord
Nich Secord

Reputation: 171

[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!

Upvotes: 8

Related Questions