Работа над приложением веб-чата. Я борюсь с ответными крюками и перехватываю беседы. Я использую 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>
);
}