CODEWITHSUNDEEP
reactjsgraphql
Julius Goddard
Julius Goddard

Reputation: 347

Pass Argument into GraphQL query

My React component needs to fetch one particular item,

the query looks like this:

const ITEMS_QUERY = gql  `query GetEntry($id: ID!) {
  getEntry(id: $id) {
    id
    date
    items {
      items {
        id
        entryID
        name
        amount
        hazardRating
        createdAt
        updatedAt
      }
      nextToken
    }
    createdAt
    updatedAt
  }
}
`;

The query takes in an ID as an argument in order to fetch one Item, how do I pass in the id variable from the following React component:

const Items = (id) => {

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

    console.log(id)

    if (loading) return "Loading...";
    if (error) return <pre>{error.message}</pre>
  
    return (
        <div className="Items">
         dddd
        </div>
      );

}

I have attempted to pass in the id variable like so: useQuery(ITEMS_QUERY(id)) but this is obviously not correct and I don't expect it to be so...

How would you pass the id variable from the component into the ITEMS_QUERY ?

Upvotes: 0

Views: 35

Answers (1)

Will Maradiaga
Will Maradiaga

Reputation: 96

You can check the useQuery API here, you're missing the options attribute:

const { data, loading, error } = useQuery(ITEMS_QUERY,{ variables: id });

Upvotes: 2

Related Questions