CODEWITHSUNDEEP
reactjsapolloreact-apollo
Aura Divitiae
Aura Divitiae

Reputation: 105

Passing in multiple variables into an Apollo Query component

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

const DogPhoto = ({ breed }) => (
  <Query query={GET_DOG_PHOTO} variables={{ breed }}>
    {({ loading, error, data }) => {
      if (loading) return null;
      if (error) return `Error!: ${error}`;

      return (
        <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      );
    }}
  </Query>
);

Im looking at the documentation and i can see that they have passed a props called breed in the variables property of the Query component. What if the query takes 2 arguments, how do you pass in 2 parameters?

Upvotes: 1

Views: 4273

Answers (1)

Cl&#233;ment Pr&#233;vost
Cl&#233;ment Pr&#233;vost

Reputation: 8600

You are using ES2015 Shorthand property names. These two syntax are equivalent.

  <Query query={GET_DOG_PHOTO} variables={{ breed }}>
  <Query query={GET_DOG_PHOTO} variables={{ breed: breed }}>

Then, if you have a query with 2 params like so:

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!, $size: Int!) {
    dog(breed: $breed, size: $size) {
      id
      displayImage
    }
  }
`;

The query component will look like this

function DogPhoto({ breed, size }) => 
  return (
    <Query query={GET_DOG_PHOTO} variables={{ breed, size }}>
      {({ loading, error, data }) => {
        if (loading) return null;
        if (error) return `Error!: ${error}`;

        return (
          <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
        );
      }}
    </Query>
  )
};

Upvotes: 4

Related Questions