CODEWITHSUNDEEP
graphqlapolloreact-apolloapollo-client
Vimalraj Selvam
Vimalraj Selvam

Reputation: 2245

Apollo Graphql: Avoid loading indicator during refetch

I have the following apollo-graphql client side code wherein I trigger the graphql query for every 30 seconds and get the data.

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

The problem I face is that every after 30 seconds I see Loading... since the query is retriggered. I want the Loading... to be displayed only when the page is launched, thereafter it should be smooth update and I don't want to show the Loading... indicator to user. Not sure how to achieve this.

Upvotes: 3

Views: 2681

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84867

I know the docs recommend using data.loading, but in most cases checking if the query result is null works just as well:

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

Keep in mind too that it's possible for GraphQL to return some errors and the data to still be returned. That means in a production environment, you probably want more robust error-handling behavior that doesn't necessarily prevent the page from rendering if any errors are present.

Upvotes: 3

Related Questions