要解决“Apollo Client的useLazyQuery不会启动”的问题,首先需要确保正确使用useLazyQuery
钩子。
useLazyQuery
是Apollo Client的一个React钩子,用于在组件中声明一个延迟执行的查询。它返回一个元组,其中包含一个函数以及查询结果。
以下是一个示例代码,演示如何正确使用useLazyQuery
:
import { useLazyQuery } from '@apollo/client';
import { gql } from 'apollo-boost';
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
`;
const MyComponent = () => {
const [getUser, { loading, data }] = useLazyQuery(GET_USER);
const handleButtonClick = () => {
getUser({ variables: { id: '1' } });
};
if (loading) {
return Loading...;
}
if (data) {
return {data.user.name};
}
return (
);
};
export default MyComponent;
在上述示例中,useLazyQuery
钩子接受一个GraphQL查询作为参数,并返回一个getUser
函数以及查询结果的对象。
在handleButtonClick
函数中,通过调用getUser
函数并传递变量 id
来触发查询。
在组件的渲染中,根据loading
和data
的状态显示不同的UI。如果查询正在加载中,显示"Loading..."文本;如果查询已完成并且有数据,显示用户的名称;否则显示一个按钮,点击按钮会调用handleButtonClick
函数来触发查询。
确保按照上述代码示例的方式使用useLazyQuery
,以确保它能正常启动查询。