RTK Query中如何直接获取MyClass类型数据而非Fetch响应对象？

问题描述 #

学习RTK Query的TypeScript用法时，定义了如下端点：

const myApi = myBaseApi.injectEndpoints({
    endpoints: build => ({
        myMethod: build.query<MyClass, void>({
            query: () => 'path/to/endpoint',
        }),
    }),
    overrideExisting: false,
});

使用钩子const q = useMyMethod()时，类型提示q.data为MyClass类型，但实际运行时q.data是Fetch响应对象，必须通过q.data.data才能获取真正的MyClass实例，与教程示例不符。

问题原因 #

核心问题出在baseQuery的配置上：

• RTK Query默认的fetchBaseQuery会自动解析JSON响应，将响应体数据作为data字段返回，钩子拿到的q.data就是解析后的业务数据。
• 如果自定义了baseQuery但未正确处理响应解析，直接返回原始的Fetch Response对象，就会导致运行时q.data是Response实例；而类型提示因你在build.query中声明了返回类型为MyClass，出现类型与实际值不匹配的情况。

解决方法 #

确保baseQuery返回符合RTK Query要求的结构：一个包含data字段的对象，其中data是解析后的业务数据。

示例：正确的自定义baseQuery写法 #

import { createApi, BaseQueryApi, FetchArgs } from '@reduxjs/toolkit/query/react';

const customBaseQuery = async (args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => {
  // 发起请求
  const response = await fetch(typeof args === 'string' ? args : args.url, args);
  
  // 解析响应体（根据实际响应格式调整，比如json、text等）
  const parsedData = await response.json();
  
  // 返回RTK Query要求的结构：{ data: 解析后的数据 }
  return { data: parsedData };
};

// 创建baseApi时使用正确的baseQuery
const myBaseApi = createApi({
  baseQuery: customBaseQuery,
  endpoints: () => ({}),
});

如果使用默认fetchBaseQuery #

确认未在fetchBaseQuery的配置中修改响应处理逻辑，默认配置会自动解析JSON响应：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const myBaseApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: () => ({}),
});

总结 #

只要保证baseQuery返回{ data: 业务数据 }的结构，RTK Query的钩子就会直接将q.data映射为你在build.query中声明的MyClass类型，无需额外访问q.data.data。

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu