代码之家  ›  专栏  ›  技术社区  ›  Vimalraj Selvam MIZ

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

  •  3
  • Vimalraj Selvam MIZ  · 技术社区  · 7 年前

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

    Loading... 因为查询被重新触发。我想要 加载。。。 指示器指向用户。不确定如何实现这一点。

    1 回复  |  直到 7 年前
        1
  •  3
  •   Daniel Rearden    7 年前

    data.loading ,但在大多数情况下,检查查询结果是否为null也同样有效:

    // 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可能返回一些错误,并且数据仍将返回。这意味着在生产环境中,您可能需要更健壮的错误处理行为,如果存在任何错误,则不一定会阻止页面呈现。