类型错误：无法读取 Apollo 中未定义的属性“fetchMore”

Question

我正在使用 Apollo 和 React 实现无限滚动。一切正常。当我离开 Feed 然后回到 Feed 时，我收到了这个奇怪的错误：

<块引用>

TypeError: 无法读取未定义的属性“fetchMore”

有其他人遇到过这个问题吗？我找到了 this，但似乎还没有任何解决方案。其中一个答案提到了“在执行 fetchMore 之前检查路由”的部分解决方案，但我不知道是什么意思。

我仍处于开发阶段，所以我还没有机会清理这个组件，但它是：

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, FETCH_TAG_FEED } = Queries;

const Feed = ({
  user, tag
}) => {
  let fetchMoreDiv = useRef(null);
  let cursorId = useRef(null);
  
  useEffect(() => {
    var scroll = document.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: gqlQuery,
          variables: {
            query: query,
            cursorId: cursorId.current
          },
        })
      }
    })

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

  var gqlQuery
  var query
  if (user) {
   gqlQuery = FETCH_USER_FEED
   query = user.blogName
  } else if (tag) {
   gqlQuery = FETCH_TAG_FEED
   query = tag.title.slice(1)
  } else {
   gqlQuery = FETCH_USER_FEED
   query = Cookies.get('currentUser')
  }
  
  let { loading, error, data, fetchMore } = useQuery(gqlQuery, {
    variables: {
      query: query,
      cursorId: null
    },
  })
  
  if (loading) return 'Loading...';
  if (error) return `Error: ${error}`;
  
  const { fetchUserFeed, fetchTagFeed } = data

  cursorId.current = fetchUserFeed ? fetchUserFeed[fetchUserFeed.length - 1]._id :
  fetchTagFeed[fetchTagFeed.length - 1]._id
  
  if (tag) {
    return(
      <div>
        <div>
          {fetchTagFeed.map((post, i) => {
            return (
              <div
                className='post'
                key={post._id}
              >
                <PostUpdateOrShow
                  post={post}
                />
              </div>
            )
          })}
          </div>
          <InfiniteScroll 
            fetchMoreDiv={fetchMoreDiv}
          />
          <div
            id='fetchMore'
          >
          </div>
      </div>
    )
  } else {
    return(
      <div>
        <div>
          {fetchUserFeed.map((post, i) => {
            return (
              <div
                className='post'
                key={post._id}
              >
                <PostUpdateOrShow
                  post={post}
                />
              </div>
            )
          })}
          </div>
          <InfiniteScroll 
            fetchMoreDiv={fetchMoreDiv}
          />
          <div
            id='fetchMore'
          >
          </div>
      </div>
    )
  }
}

export default Feed;

Apollo 客户端配置：

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
       fields: {
         fetchLikesRepostsAndComments: {
           merge: (existing = [], incoming = []) => {
             return incoming
           }
        },
        fetchUserFeed: {
          keyArgs: ['query'],
            merge: (existing = [], incoming = []) => {
            const elements = [...existing, ...incoming].reduce((array, current) => {
              return array.map(i => i.__ref).includes(current.__ref) ? array : [...array, current];
            }, []);
            
            return elements
        },
        }
      }
    }
  }
  }),
  errorLink
})