Graphql fetchMore正在重新蚀刻，直到应用程序崩溃

我正在尝试从graphql API加载所有数据：。我在graphql操场上做了一些测试，结果成功了。但是，我在重新呈现查询时遇到了一些问题。当我使用所有数据时，组件会一直重新排序，直到崩溃

我加载组件上字符的简历

我正在使用fetchMore更新graphql服务器中的数据，当没有剩余的页面时，我设置了一个标志不再这样做。它不起作用

我尝试在事件处理程序中执行fetchMore，但它工作正常

所有人.query.js

import {gql} from 'apollo-boost';

export const GET_PEOPLE = gql`
  query people($limit: Int,$after: String = null){
    allPeople(after: $after,first: $limit){
      people{
        id
        name
        species{
          name
        }
        homeworld{
          name
        }
      }
      pageInfo{
        endCursor
        hasNextPage
      }
    } 
  }
`

侧面板.component.jsx

import React from 'react';

import PersonCell from '../person-cell/person-cell.component';

import '../../queries/all-people.query'

import './side-panel.styles.scss';
import { GET_PEOPLE } from '../../queries/all-people.query';
import { useQuery } from '@apollo/client';

let allDataLoaded = false;

const done = () => {
    allDataLoaded = true;
}

const SidePanel = () => {
    const {data, fetchMore} = useQuery(GET_PEOPLE, {variables:{limit: 5}});

    function onFetch (){
       if(data && data.allPeople.pageInfo.hasNextPage)
        fetchMore({
            variables: {
                limit: 5,
                after: data?data.allPeople.pageInfo.endCursor:null
            },
            updateQuery: (prev, {fetchMoreResult}) => {
                if(!fetchMoreResult.allPeople.pageInfo.hasNextPage){
                    done();
                }
                fetchMoreResult.allPeople.people = [
                    ...prev.allPeople.people,
                    ...fetchMoreResult.allPeople.people
                ]
                return fetchMoreResult;
            } 
        })
    }


    if(!allDataLoaded){
        onFetch();
    }

    return (
        <div className="side-panel">
            {
                data?(data.allPeople.people.map((person)=>{
                    if(person.species){
                        return(<PersonCell
                                key = {person.id} 
                                name = {person.name} 
                                specie = {person.species.name} 
                                homeworld = {person.homeworld.name}
                                id = {person.id}

                            />
                        )
                    }else{
                        return(<PersonCell 
                                key = {person.id} 
                                name = {person.name}
                                specie = "Human" 
                                homeworld = {person.homeworld.name}
                                id = {person.id}
                            />
                        )
                    }
                })):null
            }
        </div>
        
    );
}


export default SidePanel;

从“React”导入React；
从“../person cell/person cell.component”导入PersonCell；
导入“../queries/all people.query”
导入“./side panel.styles.scss”；
从“../../querys/all PEOPLE.query”导入{GET_PEOPLE}；
从'@apollo/client'导入{useQuery}；
让allDataLoaded=false；
const done=（）=>{
allDataLoaded=true；
}
常量侧面板=（）=>{
const{data，fetchMore}=useQuery（GET_PEOPLE，{variables:{limit:5}}）；
函数onFetch（）{
if（data&&data.allPeople.pageInfo.hasNextPage）
费特莫尔({
变量：{
限额：5，
之后：data？data.allPeople.pageInfo.endCursor:null
},
updateQuery：（prev，{fetchMoreResult}）=>{
如果（！fetchMoreResult.allPeople.pageInfo.hasNextPage）{
完成（）；
}
fetchMoreResult.allPeople.people=[
…上一个，所有人，所有人，
…获取更多结果。所有人。所有人
]
返回结果；
} 
})
}
如果（！allDataLoaded）{
onFetch（）；
}
返回(
{
数据？（data.allPeople.people.map（（person）=>{
if（人、种）{
返回(
)
}否则{
返回(
)
}
}))：null
}
);
}
导出默认侧面板；

谢谢，先生。你的评论帮了大忙。