UseEffect 不会在第二次更改时触发，但会在启动时触发两次。（React 钩子和 apollo-graphql 钩子）

Question

useEffect 不会在第二次更改时触发，但会在启动时触发两次（React 钩子和 apollo-graphql 钩子）。 在 console.logs 中，我描述了何时触发更改以及何时不触发。 我没有更多线索可以添加。

这是我的页面（Next.js 页面）

import React, { useEffect, useState } from 'react'
import Calendar from '../components/Calendar';
import { useHallsQuery } from '../generated/graphql';
const schedule = () => {

  const { data, loading, error, refetch:refetchSessions } = useHallsQuery();

  const [sessions, setSessions] = useState([] as any);

  const [owners, setOwners] = useState([] as any);
  

  useEffect(() => {
    console.log('On launch trigger twice, on first change trigger once, on second doesn't trigger and later trigger correctly, but it's one change delay');
    if(loading === false && data){
      const colors: any = [
        '#FF3333',
        '#3333FF',
        '#FFFF33',
        '#33FF33',
        '#33FFFF',
        '#9933FF',
        '#FF9933',
        '#FF33FF',
        '#FF3399',
        '#A0A0A0'
      ];
      let pushSessions:any = [];
      let owners:any = [];
      data?.halls?.map(({sessions, ...o}, index) =>{
        owners.push({id:o.id,
        text:o.name,
        color: colors[index%10]});
        sessions.map((session:any) => {
          pushSessions.push({...session,
            ownerId: o.id});
        })
    })
        setSessions(pushSessions);
        setOwners(owners);
    }
}, [loading, data])

    if (loading) return <div>Loading...</div>
    if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      <Calendar sessions={sessions} owners={owners} refetchSessions={refetchSessions} />
    </div>
  )
}

export default schedule

以及我获取道具并触发 refetchSessions 的组件部分。

    const Calendar = (props: any) => {
      let { sessions, owners, refetchSessions } = props;
    
      const [moveSession] = useMoveSessionMutation();
    ...
    
    const commitChanges = ({ added, changed, deleted }: any) => {
    
        if (added) {
       //
        }
        if (changed) {
           console.log('trigger on all changes! Correct')
          const id = Object.keys(changed)[0];
            moveSession({variables:{
              input: {
                id: parseInt(id),
                ...changed[id]
              }
            }, refetchQueries: refetchSessions
          })
        }
    if (deleted !== undefined) {
      // 
    }

  };

return (

// Some material-ui components and @devexpress/dx-react-scheduler-material-ui components in which commitChanges function is handled

)
export default Calendar;

钩子是用 graphql-codegen(generated/graphql.tsx) 生成的：

   export function useHallsQuery(baseOptions?: Apollo.QueryHookOptions<HallsQuery, HallsQueryVariables>) {
            return Apollo.useQuery<HallsQuery, HallsQueryVariables>(HallsDocument, baseOptions);
          }
    export function useHallsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HallsQuery, HallsQueryVariables>) {
              return Apollo.useLazyQuery<HallsQuery, HallsQueryVariables>(HallsDocument, baseOptions);
            }
    export type HallsQueryHookResult = ReturnType<typeof useHallsQuery>;

这是架构（graphql/hall.graphql）：

query Halls {
  halls {
    id
    name
    sessions{
      id
      title
      startDate
      endDate
    }
  }
}