TypeError：無法讀取 Apollo 中未定義的屬性“fetchMore”

Question

我正在使用 Apollo 和 React 實現無限滾動。 一切正常。 當我離開 Feed 然后回到 Feed 時，我收到了這個奇怪的錯誤：

TypeError：無法讀取未定義的屬性“fetchMore”

有沒有其他人有過這個問題的經驗？ 我找到了這個，但似乎還沒有任何解決方案。 其中一個答案提到了部分解決方案“在執行 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;

阿波羅客戶端配置：

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
})

Answer 1

我相信問題在於您在useEffect掛鈎中使用fetchMore 。 嘗試重新考慮您的代碼以避免這種情況。 在鈎子外使用fetchMore將完美無缺。