Apollo Graphql：在重新蚀刻期间避免加载指示器

我有以下apollo graphql客户端代码，其中每30秒触发一次graphql查询并获取数据

import React, { Component } from 'react';
import { gql, graphql } from 'react-apollo';
import _ from 'underscore';

class Test extends Component {

    render() {
        if (this.props.TestData.loading) {
            return <div>Loading...</div>
        }

        if (this.props.TestData.error && this.props.TestData.error !== null) {
            return <div>Error...</div>
        }

        // Iterate through the this.props.TestData.getTestData and build the Table of data here
        return (
            <table>
                _.map(this.props.TestData.getTestData.testList, (test) => {
                    <tr>
                        <td>{test.testName}</td>
                        <td>{test.status}</td>
                    </tr>
                })
            </table>
        );
    }

}

const TestQuery = gql`
    query TestQuery() {
        getTestData() {
            testList {
                testName
                status
            }
        }
    }
`;

const options = () => ({
    pollInterval: 30000,
});

const withTestData = graphql(TestQuery, { 
    name: 'TestData',
    options, 
});

export default withTestData(Test);

import React，{Component}来自'React'；
从'react apollo'导入{gql，graphql}；
从“下划线”导入；
类测试扩展了组件{
render（）{
if（this.props.TestData.loading）{
返回加载。。。
}
if（this.props.TestData.error&&this.props.TestData.error！==null）{
返回错误。。。
}
//迭代this.props.TestData.getTestData并在此处构建数据表
返回(
_.map（this.props.TestData.getTestData.testList，（test）=>{
{test.testName}
{test.status}
})
);
}
}
const TestQuery=gql`
查询TestQuery（）{
getTestData（）{
测试列表{
测试名
地位
}
}
}
`;
常量选项=（）=>({
投票间隔：30000，
});
常量withTestData=graphql（TestQuery，{
名称：“TestData”，
选项，
});
使用TestData导出默认值（测试）；

---

我面临的问题是，自从查询被重新触发后，每隔30秒我就会看到

加载…

。我希望

加载…

仅在页面启动时显示，此后应该是平滑更新，我不希望向用户显示

加载…

指示器。不确定如何实现这一点。

我知道文档建议使用

数据。加载

，但在大多数情况下，检查查询结果是否为空同样有效：

// Should probably check this first. If you error out, usually your data will be
// undefined, which means putting this later would result in it never getting
// called. Also checking if it's not-null is a bit redundant :)
if (this.props.TestData.error) return <div>Error...</div>

// `testList` will only be undefined during the initial fetch
// or if the query errors out
if (!this.props.TestData.getTestData) return <div>Loading...</div>

// Render the component as normal
return <table>...</table>

//应该先检查一下。如果您出错，通常您的数据将被删除
//未定义，这意味着将此放在后面将导致它永远无法得到
//打电话来。另外，检查它是否不为null有点多余：）
如果（this.props.TestData.error）返回错误。。。
//“testList”仅在初始获取期间未定义
//或者如果查询出错
如果（！this.props.TestData.getTestData）返回加载。。。
//将组件渲染为法线
返回。。。

---

还要记住，GraphQL可能会返回一些错误，并且仍然会返回数据。这意味着在生产环境中，您可能需要更健壮的错误处理行为，如果出现任何错误，这些行为不一定会阻止页面呈现。

太棒了，它起作用了。编辑了您的代码，因为缺少否定，并修改为指向正确的字段。