如何让getChatHistory查询在getUser查询执行完成后触发？

方案一：利用useQuery的skip参数控制执行时机 #

通过skip参数可以直接控制查询是否跳过执行。我们可以判断getUser返回的userData是否存在，只有当userData加载完成（即getUser执行完毕）时，才让getChatHistory启动查询。

修改后的代码如下：

export const getChatHistory = gql`{
   chatHistory {
     title
   }
  }
`;

export const getUser = gql`{
   user {
     name
     email
   }
  }
`;

const Home = ()=> {
  const {data:userData} = useQuery(getUser);
  // 仅当userData存在时，才执行getChatHistory查询
  const {loading: chatLoading,error:chatError,data:chatData}=useQuery(getChatHistory, {
    skip: !userData
  });
  ...
}

方案二：使用useLazyQuery手动触发查询 #

useLazyQuery会返回一个手动触发查询的函数，我们可以在getUser获取到用户数据后，主动调用这个函数来执行getChatHistory查询，这种方式更灵活，适合需要额外逻辑控制触发时机的场景。

代码示例：

import { useQuery, useLazyQuery } from '@apollo/client';

export const getChatHistory = gql`{
   chatHistory {
     title
   }
  }
`;

export const getUser = gql`{
   user {
     name
     email
   }
  }
`;

const Home = ()=> {
  const {data:userData} = useQuery(getUser);
  // 定义懒查询及对应的触发函数
  const [getChatHistoryQuery, {loading: chatLoading,error:chatError,data:chatData}] = useLazyQuery(getChatHistory);

  // 监听userData变化，拿到用户数据后立即触发聊天记录查询
  useEffect(() => {
    if (userData) {
      getChatHistoryQuery();
    }
  }, [userData, getChatHistoryQuery]);
  ...
}

内容的提问来源于stack exchange，提问作者Aravind Ashokkumar