将多个变量传入 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>
  )
};