Refetch does not toggle loading

[cannibal]

#321

I am still experiencing this issue and so are some others in the thread. If someone could take a look that would be great :)

It would be nice if there was perhaps a differentiation between loading (the initial fetch) and loading a refetch? - as sometimes - different display logic is used.

I guess you could add a prop - maybe 'loading context' for this quite easily that would not break BC.

[mbaranovski]

I have the same issue. I thought I can find out about refetch in progress from networkStatus regarding to: https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-networkStatus but networkStatus is not being updated to 4 at all.

[n1ru4l]

This is how I handle the reloading state:

import { graphql } from "react-apollo";
import { withState, mapProps } from "recompose";
import { flowRight } from "lodash";

const withQuery = graphql(yourQuery, yourQueryOptions);

const withReloadingState = withState("reloading", "setReloading", false);
const withEnhancedRefetch = mapProps(
  ({
    setReloading,
    reloading,
    data: { refetch, ...dataRest },
    ...remainingProps
  }) => ({
    data: {
      reloading,
      refetch: (...args) => {
        if (reloading) {
          return Promise.reject(new Error("Reload already in progress."));
        }
        setReloading(true);
        return refetch(...args)
          .then(result => {
            setReloading(false);
            return result;
          })
          .catch(err => {
            setReloading(false);
            return Promise.reject(err);
          });
      },
      ...dataRest
    },
    ...remainingProps
  })
);

const withReloadingProp = flowRight(withReloadingState, withEnhancedRefetch);

const MyEnhancedComponent = flowRight(withQuery, withReloadingProp)(
  MyComponent
);

[drFabio]

I have the same issue but my biggest problem is that it seems it does not even trigger the props transformation if it was already made

[n1ru4l]

Can you check out 2.1.0-beta.3? AFAIK this should be fixed there.

[drFabio]

I tried to build it and couldn't . I'm using a node:9.3.0 image and ran:

yarn install
yarn run compile

Do I need to do anything fancier?

[n1ru4l]

You can install it via yarn add [email protected]

[drFabio]

@n1ru4l sorry for the awfully late response. Yes the beta solves it and make it do not need for the "@Skip" directive.

[bxt]

Is this supposed to be working again? I'm using [email protected] and it does not seem to work for me. I can not see which commit was supposed to fix this or which code is supposed to do that. I have a component like this:

<Query query={QUERY} notifyOnNetworkStatusChange>
  {({error, loading, data, refetch}) =>
    loading ? (
      <div>loading...</div>
    ) : error ? (<div>
      Sorry, there was an error!
      <button onClick={() => {refetch();}} loading={loading}>
        retry
      </button>
    </div>) : (
      <div>{data.foo}</div>
    )
  }
</Query>

And the problem ist, the retry button is not hidden after you clicked it, so it looks as if nothing happens at all and you'd click the button again and again.

The way I test this is I switch Chrome to offline in the dev tools, then load the page, then switch it to slow 3G. I tried downgrading to 2.1.0-beta.3 but then other things in the app break.

[n1ru4l]

@bxt You could convert the example that I provided to the Render-Prop-API (https://reactjs.org/docs/render-props.html). I have no time to provide an example for you. But the Higher-Order-Component (https://reactjs.org/docs/higher-order-components.html) approach I provided in #1529 (comment) does still work on the newest apollo-client version.

[bxt]

Hmmm okay. I tried the versions mentioned in apollographql/apollo-client#1622 (comment) and it seems like networkStatus is never updated to 4 (console.log in render) for me even though I followed the example in the docs pretty closely. Maybe it's also about the cache policy. So your solution will probably work, but I'll just remove the retry button :P Maybe I'll find the time later to provide an actual minimal repro for that. For now I'd just wait wether other people even have the problem.

[hwillson]

This should no longer be an issue with current day react-apollo. Let us know otherwise - thanks!