TypeError: Cannot read property 'fetchMore' of undefined

Intended outcome:

When using infinite scroll cursor based pagination user should should be able to navigate away from the feed and then back to the feed and have fetchMore continue to work.

Here’s an example of a Feed component:

import React, { useEffect, useRef } from 'react';
import { useQuery } from '@apollo/client';
import PostUpdateOrShow from '../posts/types/showOrUpdate/PostUpdateOrShow.js'
import Cookies from 'js-cookie';
import Queries from '../../graphql/queries';
import InfiniteScroll from './util/Infinite_Scroll.js';
const { FETCH_USER_FEED } = Queries;

const CurrentUserFeed = ({
  user, tag
}) => {
  let fetchMoreDiv = useRef(null);
  let cursorId = useRef(null);

  useEffect(() => {

    return () => {
      window.removeEventListener('scroll', scroll)
    }
  })

  
  let { loading, error, data, fetchMore } = useQuery(FETCH_USER_FEED, {
    variables: {
      query: Cookies.get('currentUser'),
      cursorId: null
    },
  })

  var scroll = window.addEventListener('scroll', function(event) {
    fetchMoreDiv.current = document.querySelector('#fetchMore')
    var el = fetchMoreDiv.current.getBoundingClientRect()
    var elTop = el.top
    var elBottom = el.bottom
    var innerHeight = window.innerHeight
    
    if (elTop >= 0 && elBottom <= innerHeight) {
      fetchMore({
        query: FETCH_USER_FEED,
        variables: {
          query: Cookies.get('currentUser'),
          cursorId: cursorId.current
        },
      })
    }
  })
  
  if (loading) return 'Loading...';
  if (error) return `Error: ${error}`;
  
  const { fetchUserFeed } = data

  cursorId.current = fetchUserFeed[fetchUserFeed.length - 1]._id

  return(
    <div>
      <div>
        {fetchUserFeed.map((post, i) => {
          return (
            <div
              className='post'
              key={post._id}
            >
              <PostUpdateOrShow
                post={post}
              />
            </div>
          )
        })}
        </div>
  
        <div
          id='fetchMore'
        >
        </div>
    </div>
  )
}

export default CurrentUserFeed;

Actual outcome:

This error occurs and breaks the application:

How to reproduce the issue:

This is my field policy:

fetchUserFeed: {
          keyArgs: ['query'],
            merge: (existing = [], incoming = []) => {
              console.log(incoming)
            const elements = [...existing, ...incoming].reduce((array, current) => {
              return array.map(i => i.__ref).includes(current.__ref) ? array : [...array, current];
            }, []);
            
            return elements
          },
        },

If I console log incoming I can see the returned results, but error still occurs.

I’ve decided I’m going to try to use useApolloClient to circumvent fetchMore entirely. Would be awesome to find out I’m doing something wrong or it would be awesome to get this bug fixed if it is indeed one. Really appreciate everyones hard work, I really enjoy learning and using Apollo, looking forward to resolving this.

I’ve seen one or two similar issues but I believe my situation is different enough to warrant a new issue.

Versions

System: OS: macOS 11.2.3 Binaries: Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm Browsers: Chrome: 90.0.4430.93 Safari: 14.0.3

Apollo and React version:

“@apollo/client”: “^3.3.15”, “react”: “^17.0.1”,

[harish-aka-shivi]

I have faced this issue many times and one thing that seems to be common is this happens after the hot reload of the code. Maybe, I think as the component is refreshed and a new useQuery hook is created, the pending fetchMores might give this exception.

[benjamn]

@johnobrien8642 Is there any chance the React component has unmounted by the time it calls fetchMore? That might explain queryData.currentObservable being undefined (not my final answer, just hoping to diagnose the problem).