Передача нескольких переменных в компонент Apollo Query - PullRequest
Новая
       5

Передача нескольких переменных в компонент Apollo Query

0 голосов
/ 14 сентября 2018 
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>
);

Я смотрю документацию и вижу, что они передали реквизит под названием breed в свойстве переменных компонента Query. Что если запрос принимает 2 аргумента, как передать 2 параметра?

1 Ответ

0 голосов
/ 15 сентября 2018

Вы используете ES2015 Сокращенные имена свойств .Эти два синтаксиса эквивалентны. 

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

Затем, если у вас есть запрос с 2 параметрами, подобный следующему: 

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

Компонент запроса будет выглядеть следующим образом 

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>
  )
};
...