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... 표시기를 표시하고 싶지 않습니다. 이것을 달성하는 방법을 모르겠습니다.

// 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 일부 오류와를 반환하는 것이 가능하다고 너무 유의 사항 : 쿼리 결과는 단지뿐만 아니라 널 (null) 일 경우

Answer 1

나는 워드 프로세서가 data.loading를 사용하는 것이 좋습니다 알고 있지만, 대부분의 경우에 체크 데이터는 여전히 반환됩니다. 이는 프로덕션 환경에서 오류가있는 경우 페이지 렌더링을 방지하지 않는 더 강력한 오류 처리 동작을 원할 수 있음을 의미합니다.