Реагируйте на хуки и обновляйте данные с помощью команды apollo - PullRequest
Новая
       20

Реагируйте на хуки и обновляйте данные с помощью команды apollo

0 голосов
/ 22 марта 2020

Работа над приложением веб-чата. Я борюсь с ответными крюками и перехватываю беседы. Я использую appsyn c с более старыми реакциями-apollo (2.5.8). Идея заключается в том, что когда вы нажимаете на беседу из списка, я вставляю компонент беседы, а когда вы закрываете беседу, она выдвигается, и когда это происходит, мне нужно убедиться, что я запускаю функцию повторного вызова в списке бесед, чтобы обновите его.

Я передаю реквизиты или деструктурированное повторное получение, предоставляемое Reaction-Apollo в качестве зависимости 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>
  );
}

Беседы. 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>
  );
}
...