Apollo Graphql：避免在重新读取期间加载指标

Question

我有以下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); 

我所面临的问题是，每30秒后，我看到Loading...因为查询重新触发。我希望Loading...仅在页面启动时才显示，此后它应该是平滑更新，我不想向用户显示Loading...指示器。不知道如何实现这一点。

Answer 1

我知道文档推荐使用data.loading，但在大多数情况下，检查如果查询结果为空的作品一样好：

// 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> 

同时也请记住，它是可能的GraphQL返回一些错误和数据仍然被返回。这意味着在生产环境中，您可能需要更强大的错误处理行为，如果存在任何错误，则不一定会阻止页面呈现。