如何从RTK Query的useQuery钩子中解构可调用查询函数？

已知RTK Query生成的useLogInMutation钩子可以解构出可异步调用的logIn函数，示例如下：

const [logIn] = useLogInMutation();

const handleLogin = async () => {
    const username = 'username';
    const password = 'password';

    await logIn({
        username,
        password,
    });
};

现在需要实现类似的调用方式，通过解构getUser函数手动执行查询，目标调用代码如下：

const handleGetUser = async () => {
    await getUser();
};

但当前useGetUserQuery的常规解构方式是获取数据与状态：

const { data: user, isSuccess, isError, error } = useGetUserQuery();

请问如何从useGetUserQuery中解构出可调用的getUser查询函数？

解决方案 #

RTK Query中，查询钩子（如useGetUserQuery）默认会在组件挂载时自动发起请求，要实现手动触发的调用方式，有两种常用方案：

方案1：利用refetch函数并设置skip参数 #

通过解构useGetUserQuery返回的refetch方法，将其重命名为getUser，同时设置skip: true阻止初始自动请求：

// 传入undefined作为查询参数（如果你的查询不需要参数），设置skip: true
const { data: user, isSuccess, isError, error, refetch: getUser } = useGetUserQuery(undefined, {
  skip: true
});

const handleGetUser = async () => {
  // 调用getUser即可手动触发查询
  await getUser();
};

方案2：使用useLazyQuery钩子（推荐） #

RTK Query提供了专门用于手动触发查询的useLazyQuery钩子，其返回值结构与mutation钩子类似，第一个元素就是可调用的查询函数：

// 导入对应的useLazyQuery钩子（需要从API slice中生成）
const [getUser, { data: user, isSuccess, isError, error }] = useLazyQuery(getUserQuery);

const handleGetUser = async () => {
  await getUser();
};

这种方式更贴合你想要的调用体验，无需额外配置skip参数，适合按需触发查询的场景。

内容的提问来源于stack exchange，提问作者cyber-leech