reactjs - useLazyQuery 导致太多重新渲染 [Apollo/apollo/react hooks]

Question

我正在构建一个 discord/slack 克隆。我有 channel 、消息和用户。一旦加载了我的聊天组件，就会使用来自 Apollo 的 useQuery Hook 获取 channel 。

默认情况下，当用户访问聊天组件时，他需要单击特定 channel 才能查看有关该 channel 的信息以及消息。

在较小的 Channel.js 组件中，我将点击 channel 的 channel ID 写入 apollo-cache。这很完美，我在 Messages.js 组件中使用 useQuery Hook @client 从缓存中获取 channelid，它运行得很完美。

当我使用 useLazyQuery Hook 获取特定 channel (用户点击的 channel )的消息时出现问题。

它会导致 React 中的无限重新渲染循环，从而导致应用程序崩溃。

我已经尝试使用带有 skip 选项的普通 useQuery Hook 。然后，我会在需要时调用 refetch() 函数。从某种意义上说，这种“有效”不会给我无限循环。但是 console.log() 给我这个错误:[GraphQL error]: Message: Variable "$channelid"of required type "String!"没有提供。路径:未定义。这很奇怪，因为我的模式和变量是正确的??

如前所述，useLazyQuery 确实给了我无限循环。

我真的在与 apollo/react hooks 的条件性作斗争......

///Channel.js 组件///

const Channel = ({ id, channelName, channelDescription, authorName }) => {
  const chatContext = useContext(ChatContext);

  const client = useApolloClient();
  const { fetchChannelInfo, setCurrentChannel } = chatContext;

  const selectChannel = (e, id) => {
    fetchChannelInfo(true);
    const currentChannel = {
      channelid: id,
      channelName,
      channelDescription,
      authorName
    };
    setCurrentChannel(currentChannel);

    client.writeData({
      data: {
        channelid: id
      }
    });
    // console.log(currentChannel);
  };

  return (
    <ChannelNameAndLogo onClick={e => selectChannel(e, id)}>
      <ChannelLogo className='fab fa-slack-hash' />
      <ChannelName>{channelName}</ChannelName>
    </ChannelNameAndLogo>
  );
};

export default Channel;

///Messages.js 组件///

const FETCH_CHANNELID = gql`
  {
    channelid @client
  }
`;


const Messages = () => {
  const [messageContent, setMessageContent] = useState('');
  const chatContext = useContext(ChatContext);
  const { currentChannel } = chatContext;
  // const { data, loading, refetch } = useQuery(FETCH_MESSAGES, {
  //   skip: true
  // });

  const { data: channelidData, loading: channelidLoading } = useQuery(
    FETCH_CHANNELID
  );

  const [fetchMessages, { data, called, loading, error }] = useLazyQuery(
    FETCH_MESSAGES
  );

  //// useMutation is working
  const [
    createMessage,
    { data: MessageData, loading: MessageLoading }
  ] = useMutation(CREATE_MESSAGE);

  if (channelidLoading && !channelidData) {
    console.log('loading');
    setInterval(() => {
      console.log('loading ...');
    }, 1000);
  } else if (!channelidLoading && channelidData) {
    console.log('not loading anymore...');
    console.log(channelidData.channelid);
    fetchMessages({ variables: { channelid: channelidData.channelid } });
    console.log(data);
  }

我希望在来自 useLazyQuery 的数据中有消息......但是在 console.log() 中得到这个:

react-dom.development.js:16408 未捕获的不变违规:重新渲染太多。 React 限制渲染次数以防止无限循环。

Answer 1

您可以使用 useLazyQuery 返回的 called 变量。

!called && fetchMessages({ variables: { channelid: channelidData.channelid } });