Лучше всего показывать загрузку Apollo Client Query вне компонента Query? - PullRequest
Новая
       3

Лучше всего показывать загрузку Apollo Client Query вне компонента Query?

0 голосов
/ 20 июня 2019

Я хочу показать индикатор загрузки за пределами моего компонента запроса.

Прямо сейчас я использую избыточность, и когда я начинаю загружать данные из API, я устанавливаю атрибут состояния избыточности, который затем использую для отображения компонента загрузчика.

Как добиться того же с помощью клиентских запросов / мутаций Apollo?Каждый пример показывает загрузку поддержки внутри Query, но как показать загрузчик за пределами этого Query?

Допустим, у меня есть что-то вроде этого: 

<Header><Loader/></Header>
<Content><Query><List /></Query></Content>

Но я не хочу оборачивать все с помощью Queryи сделайте что-то вроде этого: 

<Query>
<Header><Loader/></Header>
<Content><List ></Content>
</Query>

Возможно ли это вообще?Должен ли я изменять @client кэш внутри Query при загрузке?

Редактировать: Я хочу заменить redux на apollo-link-state, поэтому в решении не следует использовать redux.

1 Ответ

0 голосов
/ 20 июня 2019

Я бы предложил использовать реагировать-apollo-hooks , это делает использование Apollo намного проще и веселее.

Посмотрите на пример кода 

import React from 'react';
import { useQuery } from 'react-apollo-hooks';
import get from 'lodash.get';
import SUBSCRIPTIONS_QUERY from './Subscriptions.graphql';
import s from './SubscriptionTable.scss';

const SubscriptionsTable = () => {
  const { data, loading, error } = useQuery(SUBSCRIPTIONS_QUERY);

  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <div className={s.SubscriptionTable}>
      <div className={s.SubscriptionTable__Header}>Email</div>
      {get(data, 'subscriptions', []).map(subscription => (
        <div key={get(subscription, 'id')} className={s.SubscriptionTable__Row}>
          {get(subscription, 'email')}
        </div>
      ))}
    </div>
  );
};
...