使用React Apollo进行React钩子和重新获取数据

Question

使用网络聊天应用程序。我正在努力与反应挂钩，并重新获得对话。我正在使用appsync和更旧的react-apollo（2.5.8）。这里的想法是，当您从列表中单击一个对话时，我会在“对话”组件中滑动，而当您关闭对话时，它会滑出，并且在需要时，我需要确保在“对话”列表中运行一个refetch函数以更新它。

我正在传递props或react-apollo提供的经过重构的refetch作为useEffect依赖项，最终我的useEffect不断运行。

Chat.js

export default function Chat() {
  const { user } = useContext(AuthContext);
  const { open, toggle } = useToggle();
  const transitions = useTransition(open, ...);
  const [convo, setConvo] = useState(null);
  const [refetch, setRefetch] = useState(false);

  function gotoConvo(convo: any) {
    setConvo(convo);
    toggle(true);
  }

  function handleClose() {
    setRefetch(true);
    toggle(false);
  }

  return (
    <div className="chat-box">
      <Conversations authUser={user} onChangeConvo={gotoConvo} runRefetch={refetch} />
      {transitions.map((...) => 
       <Conversation convo={convo} authUser={user} closeChat={handleClose} />
      }
    </div>
  );
}

Conversations.js

function Conversations(props: any) {
  const { conversations, onChangeConvo, runRefetch } = props;

  useEffect(() => {
     if (runRefetch) props.data.refetch(); // <-- via react-apollo query
  }, [runRefetch, props])


  return (
    <ConvoList>
       {conversations.map(convo =>
          <ConvoListItem
             onClick={() => onChangeConvo(convo)}
          />
       )}
    </ConvoList>
  );
}