在Apollo Client中,可以使用useQuery
钩子来获取查询数据,并通过refetch
方法重新发起查询请求。默认情况下,如果重新发起的查询请求与之前的查询请求相同(即查询变量和查询参数相同),Apollo Client会忽略refetch
请求。
以下是一个解决方法的代码示例:
import { useQuery } from '@apollo/client';
import { GET_DATA } from './queries';
function MyComponent() {
const { data, refetch } = useQuery(GET_DATA, {
variables: { id: 1 },
});
const handleRefetch = () => {
refetch(); // 发起重新查询的请求
};
return (
Data: {data?.getData}
);
}
export default MyComponent;
在上面的代码中,我们使用useQuery
钩子来获取数据,并将查询名称GET_DATA
和变量{ id: 1 }
传递给useQuery
。然后,我们从useQuery
返回的对象中提取data
和refetch
属性。
当点击“重新查询”按钮时,调用handleRefetch
函数,该函数将调用refetch
方法,从而发起一个新的查询请求。
请确保在查询定义文件中定义了正确的查询名称GET_DATA
和相应的查询语句。