问题

Here's the translation of the code-related part:

尝试使用 RTK Query 进行简单的基础查询，在使用 createApi() 定义我的 API 后，当我尝试解构 API 以获取我的 hooks 时，Typescript 给我报错。

我甚至复制粘贴了文档中的 Pokémon 示例代码，但即使这样，它也说 hook 不存在。

显然，我漏掉了一些东西。

这是代码，直接从文档中提取，但返回类型是字符串：

export const pokemonApi = createApi({
    reducerPath: 'pokemonApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
    endpoints: (builder) => ({
      getPokemonByName: builder.query<string, string>({
        query: (name) => `pokemon/${name}`,
      }),
    }),
})
  
export const { useGetPokemonByNameQuery } = pokemonApi;

useGetPokemonByNameQuery 就是显示错误的地方：

Property 'useGetPokemonByNameQuery' does not exist on type 'Api<BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, { getPokemonByName: QueryDefinition<...> }, "pokemonApi", never, unique symbol>'.

我做错了什么？

export const pokemonApi = createApi({
    reducerPath: 'pokemonApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
    endpoints: (builder) => ({
      getPokemonByName: builder.query<string, string>({
        query: (name) => `pokemon/${name}`,
      }),
    }),
})
  
export const { useGetPokemonByNameQuery } = pokemonApi;

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

答案1

得分: 2

*@reduxjs/toolkit: 1.9.5*

来自[官方文档](https://redux-toolkit.js.org/rtk-query/api/created-api/overview#react-hooks)：

> RTK Query的核心createApi方法与Redux核心库和Redux Toolkit一样，是与UI无关的。它们都是纯粹的JavaScript逻辑，可以在任何地方使用。

> 但是，RTK Query还提供了为每个端点自动生成React hooks的功能。由于这个功能特定依赖于React本身，RTK Query提供了一个替代入口点，其中包含这个功能。

> 如果你使用了React特定版本的createApi，生成的Api片段结构也会包含一组React hooks。

> 相同的hooks也被添加到Api对象本身，并根据端点名称和查询/变更类型自动生成名称。

确保从以下路径导入`createApi`函数：

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

而不是：

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

完整示例可以在此处找到。

<details>
<summary>英文:</summary>

*@reduxjs/toolkit: 1.9.5*

From the [/rtk-query/api/created-api/overview#react-hooks](https://redux-toolkit.js.org/rtk-query/api/created-api/overview#react-hooks) doc:

&gt; The core RTK Query createApi method is UI-agnostic, in the same way that the Redux core library and Redux Toolkit are UI-agnostic. They are all plain JS logic that can be used anywhere.

&gt; However, RTK Query also provides the ability to auto-generate React hooks for each of your endpoints. Since this specifically depends on React itself, RTK Query provides an alternate entry point that exposes a customized version of createApi that includes that functionality

&gt; If you have used the React-specific version of createApi, the generated Api slice structure will also contain a set of React hooks.

&gt; The same hooks are also added to the Api object itself, and given auto-generated names based on the endpoint name and query/mutation type.

Make sure the `createApi` function import from the below path:

```ts
import { createApi, fetchBaseQuery } from &#39;@reduxjs/toolkit/query/react&#39;;

NOT:

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

The full example can be found here