Question

我想在查询组件之外显示加载指示器。

现在我正在使用redux，当我开始从api加载数据时，我设置了redux state属性，然后将其用于显示加载程序组件。

如何使用Apollo客户端查询/突变实现相同的目的？每个示例都显示了Query内部的加载道具，但如何在该Query之外显示加载器？

让我们说我有这样的事情：

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

但是我不想用Query封装所有内容，然后执行以下操作：

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

有可能吗？加载时，我是否应该在查询中更改@client缓存？

编辑：我想用apollo-link-state替换redux，所以解决方案不应该使用redux。

Answer 1

我建议使用react-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>
  );
};

在查询组件外部显示Apollo客户端查询加载的最佳实践？

1 个答案: