currentObservable.query.fetchMore is not a function

[mob-suvee]

We encounter this error when there is page switching to/from a page that calls useQuery and attempts to call the fetchMore function it returns. We have fixed this by checking the route before executing fetchMore, but it seems like something that should be fixed.

It looks like a similar issue to this issue: https://github.com/apollographql/react-apollo/issues/3368. Looking at the code, I see that this call checks that the currentObservable query exists before calling the function (https://github.com/apollographql/react-apollo/blob/master/packages/hooks/src/data/QueryData.ts#L100) but this call assumes that the query exists and calls it anyway (https://github.com/apollographql/react-apollo/blob/master/packages/hooks/src/data/QueryData.ts#L443). It seems there are a few other places where this pattern occurs in this QueryData file, so it seems a similar fix would be good here.

Intended outcome:

The fetchMore function handles when the currentObservable query does not exist instead of throwing an undefined exception.

Actual outcome:

react-apollo throws

react-hooks.esm.js:80 Uncaught TypeError: Cannot read property 'fetchMore' of undefined
    at o.obsFetchMore (react-hooks.esm.js:80)
    at S (utils.ts:222)
    at onFetchMoreRecipes (Recipes.tsx:190)
    at c (RecipesTable.tsx:46)
    at hooks.tsx:30

How to reproduce the issue:

On Chrome browser, navigate to/from a page that makes a request with useQuery and that will attempt to call fetchMore to another page (that may or may not make a similar request). When the original request resolves, this error is thrown.

Version

react-apollo v3.1.3

System: OS: macOS Mojave 10.14.6 Binaries: Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node Yarn: 1.19.2 - /usr/local/bin/yarn npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm Browsers: Chrome: 79.0.3945.79 Firefox: 71.0 Safari: 13.0.4

[GeyseR]

I have exactly the same issue with calling refetch function after going away from the page, where data has been originally fetched.

[RIP21]

I can confirm that we're getting the same issues on fetchMore of undefined. Mostly it happens when you change route unmounting component that has pending infinity scroll-triggered request.

[mob-suvee]

The solution we tried (by "checking the route before executing fetchMore") prevents this issue in some cases but not others. The only other solution we have considered is to wrap fetchMore in our own rx.js observable and cancel the call on page changes, but since observables are used in the react-apollo code it seems like the same should be done there.

According to a similar issue opened by @RIP21, we are now swallowing the error until a fix or solution https://github.com/apollographql/apollo-client/issues/5291

[hibearpanda]

I can confirm that we're getting the same issues on fetchMore of undefined. Mostly it happens when you change route unmounting component that has pending infinity scroll-triggered request.

Experienced the same issue with a similar scenario, where we load more on on scroll to bottom. Currently on the following stack:

    "@apollo/react-common": "^3.1.3",
    "@apollo/react-hooks": "^3.1.3",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link": "^1.2.13",
    "apollo-link-error": "^1.1.12",
    "apollo-link-http": "^1.5.16",
    "apollo-link-state": "^0.4.2",
    "apollo-link-ws": "^1.0.19",
    "apollo-utilities": "^1.3.3",

[kyogi0418]

same here . The issue is seen when the onLoadMore is called for infinite scroll.

× TypeError: Cannot read property 'fetchMore' of undefined

_this.obsRefetch = function (variables) { 78 | return _this.currentObservable.query.refetch(variables); 79 | };

80 | _this.obsFetchMore = function (fetchMoreOptions) { return _this.currentObservable.query.fetchMore(fetchMoreOptions); }; 81 | _this.obsUpdateQuery = function (mapFn) { return _this.currentObservable.query.updateQuery(mapFn); }; 82 | _this.obsStartPolling = function (pollInterval) { 83 | _this.currentObservable &&

current version in use:

"apollo-client": "^2.6.8", "react-apollo": "^3.1.3",

[Jordaneisenburger]

We've got the same issue react-hooks.esm.js?b6d6:80 Uncaught TypeError: Cannot read property 'fetchMore' of undefined at QueryData._this.obsFetchMore

@mob-suvee what did you guys exactly check in the route ?

[Mheaus]

I've the same issue with "@apollo/react-hooks": "^3.1.3", and refetch

Cannot read property 'refetch' of undefined
  at QueryData._this.obsRefetch (react-hooks.esm.js?b6d6:78)

[aravind-eng]

Hello All , Are you still facing this issue? I can see this issue still.

TypeError: Cannot read property 'fetchMore' of undefined QueryData._this.obsFetchMore node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:80 77 | _this.obsRefetch = function (variables) { 78 | return _this.currentObservable.query.refetch(variables); 79 | };

80 | _this.obsFetchMore = function (fetchMoreOptions) { return _this.currentObservable.query.fetchMore(fetchMoreOptions); }; 81 | _this.obsUpdateQuery = function (mapFn) { return _this.currentObservable.query.updateQuery(mapFn); };

[Jordaneisenburger]

Yes still facing this issue

[stephane-segning]

Same here

[millievn]

same problem

[alfaris321-coder]

same here . The issue is seen when the onLoadMore is called for infinite scroll.

× TypeError: Cannot read property 'fetchMore' of undefined

_this.obsRefetch = function (variables) { 78 | return _this.currentObservable.query.refetch(variables); 79 | };

80 | _this.obsFetchMore = function (fetchMoreOptions) { return _this.currentObservable.query.fetchMore(fetchMoreOptions); }; 81 | _this.obsUpdateQuery = function (mapFn) { return _this.currentObservable.query.updateQuery(mapFn); }; 82 | _this.obsStartPolling = function (pollInterval) { 83 | _this.currentObservable &&

current version in use:

"apollo-client": "^2.6.8", "react-apollo": "^3.1.3",

Are you try to implement fetchMore when user scroll ? if yes, i think you have something wrong on your code. you need to remove event scroll, every component is destroy and reassign again.

if you. using hook, you can do like this.

 useEffect(() => {
    window.addEventListener('scroll', handleFetchMore);
    // returned function will be called on component unmount
    return () => {
      window.removeEventListener('scroll', handleFetchMore);
    };
  },[])

[DenisStad]

This happened to me because I was using refetch from an effect like this:

useEffect(() => { ... refetch() })

After I rewrote it and removed refetch from there it worked perfectly.