如何使用orval生成的useGetUserContext React Query Hook？

这个Hook基于React Query的useMutation封装，用于发起getUserContext接口请求。以下是具体使用方式：

1. 基础使用 #

在组件中引入并调用Hook，通过返回的mutate方法传入请求数据即可触发请求：

import { useGetUserContext } from './path-to-your-generated-hooks';

function YourComponent() {
  const { mutate, isLoading, error, data } = useGetUserContext();

  const fetchUserContext = () => {
    // 构造符合UserContextRequest类型的参数
    const requestData: UserContextRequest = {
      // 填入实际参数，例如 userId: 'user_123'
    };
    
    // 调用mutate传入数据
    mutate({ data: requestData });
  };

  return (
    <div>
      <button onClick={fetchUserContext} disabled={isLoading}>
        获取用户上下文
      </button>
      {isLoading && <p>加载中...</p>}
      {error && <p>请求失败: {error.message}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

2. 配置UseMutationOptions #

调用Hook时可传入mutation选项，自定义请求的回调逻辑、缓存策略等：

import { useGetUserContext } from './path-to-your-generated-hooks';

function YourComponent() {
  const { mutate, isLoading } = useGetUserContext({
    mutation: {
      onSuccess: (response) => {
        console.log('请求成功:', response);
        // 执行成功后的逻辑，比如更新本地状态、页面跳转
      },
      onError: (error) => {
        console.error('请求失败:', error);
        // 错误处理，比如提示用户
      },
      onSettled: () => {
        console.log('请求已完成（无论成败）');
      }
    }
  });

  // 触发请求的逻辑同基础使用示例
}

3. 自定义请求实例配置 #

如果需要设置请求头、超时等参数（对应customInstance的第二个参数），通过request选项传入：

import { useGetUserContext } from './path-to-your-generated-hooks';

function YourComponent() {
  const { mutate } = useGetUserContext({
    request: {
      headers: {
        'Authorization': 'Bearer your-auth-token',
        'X-Custom-Header': 'custom-value'
      },
      timeout: 5000
    }
  });

  // 触发请求的逻辑同基础使用示例
}

关键类型说明 #

• UserContextRequest：由orval根据API Schema生成的请求参数类型，确保传入数据结构匹配。
• Hook返回值：与React Query原生useMutation返回值一致，包含mutate、isLoading、error、data等状态与方法。

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