React-apollo: Refetching query from component returns "loading: true"

[saeho]

After fetching a query using mapQueriesToProps(), If I refetch the query from the React Component, the returned query has "loading: true" and it never resets to "loading: false" even though the loading is clearly finished.

While on the subject, is the best way to trigger a data refresh by doing a .refetch() inside the react component when its appropriate to do so?

[stubailo]

Not sure about the bug, but:

is the best way to trigger a data refresh by doing a .refetch() inside the react component when its appropriate to do so?

Yep, the two options are that, or pollInterval.

I think this bug would be easier to identify with a reproduction.

[saeho]

In this example, props.something.loading will be true initially (because query hasn't finished).
Then props.something.loading will be false once the initial query is finished.

Then if I refetch from <\RealComponent />\, props.something.loading will be true because refetch was requested.

After that props.something.loading never becomes false.

connect({
  mapQueriesToProps({ownProps,state}) {
    something: { ... some gql query ... }
  }
})((props,ctx) => {
  console.log(props.something.loading);
  if (props.something.loading)
    return <Loading />
  return <RealComponent />
});

[saeho]

Also, I'd like to point out that I don't think pollInterval is a very good solution for re-fetching/reactivity.

[stubailo]

I don't think pollInterval is a very good solution for re-fetching/reactivity.

Is there a better one that is equally simple? What would you prefer?

[saeho]

Well, in my app, I have web sockets running and I'm using that to re-fetch when necessary.

[stubailo]

Ah that's a great pattern! Any way I can help make that approach easier? Perhaps we should add something to the docs about it.

[jbaxleyiii]

@saeho I added a test to try and replicate your issue here: https://github.com/apollostack/react-apollo/commit/ed52c5970d0dfe85c4ae7584d6faee0d8c20980e

I'm not having any luck, do you have a reproduction somewhere?

[brettlaforge]

I'm running into the same issue using React Native:

import React from 'react';
import RN from 'react-native';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { connect } from 'react-apollo';
import gql from 'apollo-client/gql';

class Scene extends React.Component {
    render() {
        return (
            <RN.View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <RN.Text>{ (this.props.account && this.props.account.loading) ? 'Loading' : 'Loaded' }</RN.Text>
                <RN.TouchableOpacity onPress={this.refresh}>
                    <RN.Text>Refresh</RN.Text>
                </RN.TouchableOpacity>
            </RN.View>
        );
    }

    refresh = () => {
        this.props.account.refetch();
    }
}

const SceneContainer = connect({
    mapQueriesToProps: function() {
        return {
            account: {
                query: gql`
                    query {
                        account {
                            email
                        }
                    }
                `
            }
        };
    }
})(Scene);


class App extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.client = new ApolloClient({
            networkInterface: createNetworkInterface('http://localhost:3333/data')
        });
    }

    render() {
        return (
            <ApolloProvider client={this.client}>
                <SceneContainer />
            </ApolloProvider>
        );
    }

  }

export default App;

Pressing the refresh button will correctly refetch the account query, but 'this.props.account.loading' will still be true.

[jbaxleyiii]

@timbotnik @saeho @brettlaforge I did find that if the data didn't change on refetch, it wouldn't rerender and update the loading state. That is fixed in https://github.com/apollostack/react-apollo/pull/67 (0.3.7). Would you see if that fixes your issue?

[jbaxleyiii]

Closing for now, if this issue still persists let me know!

[timbotnik]

Working for me, thx @jbaxleyiii!

[brettlaforge]

Works for me as well. Thank you.

On Wed, Jun 1, 2016 at 9:37 PM, timbotnik [email protected] wrote:

Working for me, thx @jbaxleyiii https://github.com/jbaxleyiii!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollostack/react-apollo/issues/61#issuecomment-223193442,
or mute the thread
https://github.com/notifications/unsubscribe/AATzbNU0yVy_DCsyOUMkvhJSBE0qjpf9ks5qHl3zgaJpZM4InApc
.

[fusepilot]

I'm experiencing this on 0.3.19. Same circumstances. Data is always loaded successfully on refetch. But if it hasn't changed, loading will remain true.

[jbaxleyiii]

@fusepilot so refetch where data is the same still is loading? I'll take a look!

[fusepilot]

@jbaxleyiii I'm not so sure now, it may be a new issue. There's one `connect``ed component that I have working that's very similar to the one that's not working. I haven't yet been able to find what's different other than it having a different query.

[jbaxleyiii]

@fusepilot it looks like something changed in the apollo-client. What version are you using?

[fusepilot]

@jbaxleyiii 0.4.8. Just tried 0.4.9, same results.

[jbaxleyiii]

@fusepilot yeah I don't think the client reruns the next on the observable if data doesn't change anymore. I'll work on a way to fix that

[jbaxleyiii]

@fusepilot I've got a fix. I'll work on a release tonight!

[fusepilot]

@jbaxleyiii awesome, thank you!

[jbaxleyiii]

fixed again

[fusepilot]

@jbaxleyiii it works! thanks again!

[msimulcik]

I think the problem still persists in 0.4.7 in case when only variables change but results stay the same. loading is set to true and this.queryObeservable.refetch is called but, due to unchanged result, subscription is not triggered and loading remains true. I think the fix may be to call bounded version of refetch available as this.data.refetch that correctly changes loading. Here is the diff that works for me: https://github.com/apollostack/react-apollo/compare/master...msimulcik:master

[msimulcik]

@jbaxleyiii can you confirm that my fix is ok? Should I open PR?

[jbaxleyiii]

@msimulcik it looks like it should work! A lot of the loading logic has moved to core so we can remove some of my custom stuff like you did. A PR would be great!

[jbaxleyiii]

@msimulcik what version of apollo-client are you using?

[jbaxleyiii]

@msimulcik I tried to add a failing test for the issue you described but can't seem to get it to fail? https://github.com/apollostack/react-apollo/pull/173

[msimulcik]

@jbaxleyiii, I'm using apollo-client 0.4.13. Let me take a look at that test and I'll let you know if I can get it to fail.

[msimulcik]

I added the test case and opened the PR #176

[jbaxleyiii]

fixed again in next release!

[binchik]

I think I'm experiencing a related issue in react-native with apollo-client v.0.5.25:

Data has been loaded -> Turn off Internet connection -> Refetch -> Error -> Turn on Internet connection -> Refetch -> Component not rerendered

Although debugger displays loading to become false after second refetch, componentWillReceiveProps is not triggered. Data results are not changed between the refetches.

It works as expected if I set returnPartialData: true.

[helfer]

@binchik if you're still experiencing it, please open a new issue so we can see it's still open!