React-apollo: Bug when using stored refetch function

[vjsingh]

Intended outcome:
No crashes when executing the following code. I'm storing a reference to the refetch function, and attempting to call it later. I've tried it in both an HOC and in a hook. This code used to work for react-apollo:3.0.0-beta.3, but is crashing since I updated to the newest version.

The refetch function works fine when called normally, and not saved as a reference in a closure. Which leads me to believe it's perhaps some issue related to the recent logic changed on how refetch works? @hwillson #3422 #3339

HOC:

    // This is needed to refresh the data when coming back to this page
    const willFocusSubscription = this.props.navigation.addListener(
      'willFocus', payload => {
        this.props.data.refetch().catch(e => e && console.error(e));
      },
    );

or hook:

  const { data, loading, error, refetch }: QueryResult<MyQuery> = useQuery(MY_QUERY);
    // This is needed to refresh the data when coming back to page.
    const willFocusSubscription = navigation.addListener(
      'willFocus', payload => {
        refetch && refetch().catch(e => e && console.log(e));
      },
    );

-->

Actual outcome:

App crashes with:

TypeError: undefined is not an object (evaluating '_this.currentObservable.query.refetch')
obsRefetch
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:122919:45

How to reproduce the issue:

I'm not exactly sure what is needed to reproduce. I'm just trying to call refetch.

Version

  System:
    OS: macOS Mojave 10.14.4
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.120
    Firefox: 4.0b11
    Safari: 12.1
  npmPackages:
    @apollo/react-hooks: ^3.1.3 => 3.1.3
    apollo-boost: ^0.4.4 => 0.4.4
    apollo-link-context: ^1.0.19 => 1.0.19
    react-apollo: ^3.1.3 => 3.1.3
  npmGlobalPackages:
    apollo-codegen: 0.19.1

[dylanwulf]

When you say "later", how much later do you mean? Does the component unmount and remount before you call refetch?

[vjsingh]

@dylanwulf Thanks for the fast response. It's actually working now. I'm not entirely sure what changed but maybe it was just some kind of npm / node_modules / packages problem.

[vjsingh]

FYI to anyone who comes here. I'm seeing the error again but I fixed it by adding the following to the bottom of my effect:

React.useEffect(() => {
    ...
    return function cleanup() {
      willFocusSubscription.remove();
    }

[a8t]

I had to restart my iOS simulator to get this working again. Maybe a Fast Refresh issue.

[EyMaddis]

I can confirm that this happens with fast refresh every once in a while.

[EdmundMai]

this happens to me during my infinite scroll scroll view

[tony3918]

The issue was present only when fast refreshed was enabled

[stevelizcano]

This should be reopened no? Calling refetch with React Fast Refresh enabled is causing this bug, and it's something I'm sure more and more people will be running into soon.

[vjsingh]

@stevelizcano I suggest you make a new bug if you're seeing an issue with Fast Refresh.

I just reproduced this bug again this morning, and it is not related to fast refresh. It seems to be fixed by my suggested fix above.

[dacevedo12]

Same here. Fails with fast refresh on react-native

[Mattadore]

Same here, and seems related to fast refresh for me as well. Could we reopen this??

[vjsingh]

@dacevedo12 @Mattadore

There appears to be a bug around fast refresh, but this issue is for another bug. I suggest you open a new issue.

[Rizialdi]

Hi everyone.
I had the same issue until I used the equivalent of componentDidMount hook. IMHO to prevent fast refresh one must wait until the page has rendered completely. Here is an example:

useEffect(() => {
          refetch();
  }, []);

Also do not forget to use empty brackets [] as a second argument to prevent it to execute multiple times.

Hope this helps.

[mr-ryan-james]

This is happening to us in production, so obviously in our case, fast refresh is not a relevant possible cause for us. We are using react-native, react-apollo: ^3.1.3 => 3.1.3

[thalesgaldino]

happening to us as well. react-apollo: 3.1.3

we are trying to refetch using sth like navigation.addListener("didFocus", () => refetch())

But it is now easy to reproduce(intermittent problem)

clearly this is not working