В приложении React <Query>предпочтительнее, чем client.query для выполнения запросов? - PullRequest
Новая
       6

В приложении React <Query>предпочтительнее, чем client.query для выполнения запросов?

0 голосов
/ 01 октября 2018

Я работаю над проектом 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>?

1 Ответ

0 голосов
/ 01 октября 2018

Существуют варианты использования для вызова query непосредственно на клиенте, но да , с использованием компонента Query это шаблон.Из документов:

Когда React монтирует компонент Query, клиент Apollo автоматически запускает ваш запрос.Что если вы захотите отложить выполнение запроса до тех пор, пока пользователь не выполнит действие, такое как нажатие кнопки?Для этого сценария мы хотим использовать компонент ApolloConsumer и вместо этого напрямую вызывать client.query ().... Выборка таким способом довольно многословна, поэтому мы рекомендуем по возможности использовать компонент Query!

И подпись функции рендеринга пропеллера Query, и значение query вызов Promise разрешает иметь тип ApolloQueryResult .Тем не менее, между ними есть некоторые отличия.Например, использование компонента означает, что значение loading будет обновляться несколько раз, чтобы отражать состояние запроса, в то время как вы не получаете ту же функциональность при непосредственном использовании клиента.

Как правило, при использованииКлиент напрямую также означает, что вам нужно будет сохранять результаты в состоянии какого-либо другого компонента, а не просто использовать значения, предоставляемые функцией рендеринга реквизитов.

Если для запроса требуется для запускавручную, особенно если результаты запроса не будут сохранены в состоянии, то вполне нормально использовать клиент напрямую.В противном случае вам, вероятно, лучше использовать компонент Query.

...