Question

我正在一个React项目中，其中使用apollo客户端执行查询如下：

const client = new ApolloClient({
    link: link,
    cache: new InMemoryCache(),
});

client.query({ query: gql`{ hello }` })

但是我看到的大多数例子都像这样：

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;

      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

对于React应用程序，什么时候比另一种方法更受青睐？是否总是首选<Query>语法？

Answer 1

在某些情况下，可以直接在客户端上调用query，但是，是使用查询组件的模式。从文档中：

当React挂载查询组件时，Apollo Client会自动触发您的查询。如果您想延迟激发查询直到用户执行操作（例如单击按钮），该怎么办？对于这种情况，我们想使用ApolloConsumer组件，而是直接调用client.query（）。 ...以这种方式获取信息非常冗长，因此我们建议尽可能使用Query组件！

Query组件的render prop函数的签名和query调用Promise解析为的值均为ApolloQueryResult类型。但是，两者之间有一些细微的差别。例如，使用Component意味着loading值将被多次更新以反映查询的状态，而直接使用客户端时却无法获得相同的功能。

通常，直接使用客户端也意味着您需要将结果保持在其他组件的状态，而不是仅使用render props函数提供的值。

如果查询需要手动触发，尤其是如果查询结果不会保持在状态下，则直接使用客户端是完全可以的。否则，最好使用Query组件。

在React应用程序中，<query>是否优于client.query来执行查询？

1 个答案: