如何在onClick、onSubmit等事件函数中使用RTK-Query生成的hooks

RTK Query 完全支持事件触发请求的场景，没有你担心的使用限制，以下是两种适配你需求的实现方案：

方案1：使用懒查询Hook（组件内事件触发首选） #

每个 query 端点都会自动生成对应的 useLazyXxxQuery Hook，完全符合React Hooks规则，和你的使用需求完美适配。

你只需要将原来导入的 useGetFileByIdQuery 替换为自动生成的懒查询版本即可，示例代码如下：

import { useLazyGetFileByIdQuery } from './api.ts'

function MyComponent() {
  // 组件顶层调用Hook，完全符合Hooks规则
  // 返回值第一个是手动触发函数，第二个是请求状态集合
  const [getFileById, { isLoading, data, error }] = useLazyGetFileByIdQuery()

  const handleSubmit = async (): Promise<void> => {
    try {
      // 在事件回调中调用触发函数，入参和原query定义的参数格式一致
      // unwrap()方法可以直接提取接口返回数据，错误会自动抛出进入catch
      const getResponse = await getFileById({ id: 'abc', fileId: '123' }).unwrap()
      // 后续逻辑和你之前用Axios的写法完全一致
      console.log('接口返回数据：', getResponse)
    } catch (e) {
      // 错误处理逻辑和Axios的catch逻辑通用
      console.error('请求失败：', e)
    }
  }

  return <button onClick={handleSubmit}>提交请求</button>
}

方案2：手动调用端点方法（任意位置调用首选） #

如果需要在组件外的普通逻辑、工具函数、Redux中间件中调用接口，可以直接调用端点的initiate方法，不需要依赖React组件环境，和Axios的调用自由度完全一致。

示例代码如下：

import { myApi } from './api.ts'
import store from './你的Redux store路径'

// 可以在任意JS/TS文件中定义该函数，不需要在React组件内
const fetchFileById = async (id: string, fileId: string) => {
  try {
    const getResponse = await store.dispatch(
      myApi.endpoints.getFileById.initiate({ id, fileId })
    ).unwrap()
    return getResponse
  } catch (e) {
    console.error('请求失败：', e)
  }
}

补充说明 #

如果你的接口是用于数据写入、修改后端资源的操作，更推荐定义为mutation类型，生成的useXxxMutation Hook天生就是用于手动触发的，用法和上述懒查询完全一致。

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