在 React 应用程序中，<Query> 比 client.query 更适合执行查询吗？

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的用例，但是是，使用查询组件是模式。来自文档：

When React mounts a Query component, Apollo Client automatically fires off your query. What if you wanted to delay firing your query until the user performs an action, such as clicking on a button? For this scenario, we want to use an ApolloConsumer component and directly call client.query() instead. ... Fetching this way is quite verbose, so we recommend trying to use a Query component if at all possible!

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

通常，直接使用客户端还意味着您需要将结果保存在其他组件的状态中，而不是仅仅使用渲染道具函数提供的值。

如果一个查询需要手动触发，尤其是查询结果不会持久化状态，直接使用客户端是完全没问题的。否则，您最好使用 Query 组件。

在 React 应用程序中，<Query> 比 client.query 更适合执行查询吗？

In a React app, is <Query> preferred over client.query for executing queries?

apollo

graphql

react-apollo