Apollo Client，React，启用缓存时的事件答案

【问题标题】：Apollo Client, React, event when cache enabledApollo Client，React，启用缓存时的事件
【发布时间】：2019-03-30 04:27:59
【问题描述】：

const sidebar = ({ selectedSidebarItem, selectItemCb }) => {
      const doExcelExport = () => {
        const data = client.readQuery({ query: getLeveransprojektOrders });
        const rows = data.projectOrders.map(order => Object.keys(order).map(key => order[key]));
        ....
      };

      return (
        <div className="sidebar">
          <button disabled={some condition}>Export excel</button> 
        </div>
      );
    };

我需要禁用一个按钮，直到 Apollo 缓存中有项目。有没有内置的方法可以做到这一点？在文档中找不到任何关于它的信息。

【问题讨论】：

它们是如何出现在缓存中的？如果缓存中没有项目，为什么需要禁用按钮？如果您只是检查您的数据数组是否为空怎么办？或者，如果查询仍在进行中。或两者兼有：检查查询状态是否为loading 或数据数组没有项目。
是的，但是如何检查查询是否正在加载？

标签： reactjs react-apollo apollo-client

【解决方案1】：

你可以通过 render prop 函数访问 Query 的 loading prop，如下所示：

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>
);

Check docs 了解更多详情。

或者您可以使用 HOC 将此道具传递给您的组件。

import { graphql } from 'react-apollo'

const Dogs = ({ loading, dogs }) => <div>{loading && "Loading..."}</div>

const withDogs = graphql(GET_DOGS, {
  props: ({ data: { loading, error, dogs } }) => ({
    loading,
    error,
    dogs
  })
})

export default withDogs(Dogs)

请注意，您可能不需要像您那样直接在事件处理程序中加载数据。

【讨论】：