阿波罗客户端，反应，启用缓存时的事件

Question

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

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

Answer 1

你可以从渲染道具函数访问 Query 的loading道具，如下所示：

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

查看文档以了解更多详细信息。

或者您可以使用 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)

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