RTK 查询 createApi 结果：“类型‘Api<BaseQueryFn> 上不存在属性‘....’”

Question

以下代码使用 RTK 查询创建 Redux Hook：

export const specialtiesApi = createApi({
    reducerPath: 'specialtiesApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://someplace.com/' }),
    endpoints: (builder) => ({
        getSpecialties: builder.query({
            query: (name) => `specialties`,
        }),
    }),
});

export const { useGetSpecialtiesQuery } = specialtiesApi;

最后一行代码抛出 Typescript 编译时错误：

Property 'useGetSpecialtiesQuery' does not exist on type 'Api<BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, { getSpecialties: QueryDefinition<...>; }, "specialtiesApi", never, unique symbol>'

我的代码改编自https://redux-toolkit.js.org/rtk-query/usage-with-typescript使用 Typescript 4.3.5。

我看不出有什么问题。有任何想法吗？

Answer 1

确保从模块导入createApi和函数而不是.fetchBaseQuery@reduxjs/toolkit/query/react@reduxjs/toolkit/dist/query

它应该是：

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

不是：

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

更新

另请参阅官方文档API Slices：React Hooks

但是，RTK Query 还提供了为每个端点自动生成 React hook 的功能。由于这具体取决于 React 本身，RTK Query 提供了一个备用入口点，该入口点公开了包含该功能的 createApi 的自定义版本：

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

如果您使用了 React 特定版本的 createApi，则生成的 Api 切片结构还将包含一组 React hooks。

封装版本：

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