将多个变量传递到Apollo Query组件中

Question

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

我看着文档，我可以看到他们已经在Query组件的variables属性中传递了一个名为breed的道具。如果查询采用2个参数，如何传递2个参数怎么办？

Answer 1

您正在使用ES2015 Shorthand property names。这两种语法是等价的。

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