TypeError：无法读取 Apollo 中未定义的属性“fetchMore”

Posted 2023-03-10

【中文标题】TypeError：无法读取 Apollo 中未定义的属性“fetchMore”

【英文标题】：TypeError: Cannot read property 'fetchMore' of undefined in Apollo

【发布时间】：2021-07-20 08:41:03

【问题描述】：

我正在使用 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
)

【参考方案1】：

我认为问题在于您在 useEffect 挂钩中使用了 fetchMore。 尝试重新考虑您的代码以避免这种情况。在钩子外使用fetchMore 将完美无缺。