Apollo Graphql: Éviter le chargement de l'indicateur pendant le rechargement

Question

J'ai le code côté client apollo-graphql suivant dans lequel je déclenche la requête graphql toutes les 30 secondes et j'obtiens les données.

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

Le problème est que je fais face à chaque bout de 30 secondes, je vois Loading... depuis la requête est relancée. Je veux le Loading... à afficher seulement quand la page est lancée, par la suite il devrait être mise à jour sans heurt et je ne veux pas montrer l'indicateur Loading... à l'utilisateur. Je ne sais pas comment y parvenir.

Answer 1

Je sais la documentation recommande d'utiliser data.loading, mais dans la plupart des cas vérifier si le résultat de la requête est des œuvres nulles aussi bien:

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

Gardez à l'esprit aussi qu'il est possible de GraphQL pour revenir quelques erreurs et la données à encore être retourné. Cela signifie que dans un environnement de production, vous voulez probablement un comportement de gestion des erreurs plus robuste qui n'empêche pas nécessairement le rendu de la page si des erreurs sont présentes.