多API场景下RTK Query仅单个可用：useGetAddress函数报错

错误信息 #

TypeError: (0 , _api_addressApi__WEBPACK_IMPORTED_MODULE_2__.useGetAddress) is not a function

项目中使用两个基于RTK Query实现的API，其中destinationApi运行正常，但addressApi触发上述错误。以下是相关代码：

addressApi.js 代码

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

export const addressApi = createApi({
  reducerPath: "address",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://random-data-api.com/api/v2",
  }),
  endpoints: (builder) => ({
    getAddress: builder.query({
      query: () => {
        return { url: "/addresses" };
      },
    }),
  }),
});

export const { useGetAddress } = addressApi;

store.js 配置

import { configureStore } from "@reduxjs/toolkit";

import { addressApi } from "../api/addressApi";
import { destinationApi } from "../api/destinationApi";

export const store = configureStore({
  reducer: {
    // destinationApi works but addressApi does not works
    [destinationApi.reducerPath]: destinationApi.reducer,
    [addressApi.reducerPath]: addressApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .concat(destinationApi.middleware)
      .concat(addressApi.middleware),
});

调用组件代码

import { useGetAddress } from "../api/addressApi";
function AddDestination() {
....
const { data, error } = useGetAddress();
console.log(data);

问题原因与解决方案 #

错误核心是RTK Query的hook命名规则：为builder.query生成的hook会自动添加Query后缀。你定义的endpoint是getAddress，所以生成的正确hook名称是useGetAddressQuery，而非useGetAddress。

1. 修改addressApi.js的导出语句：

// 原代码
export const { useGetAddress } = addressApi;

// 修改后
export const { useGetAddressQuery } = addressApi;

2. 修改组件中的调用代码：

// 原代码
import { useGetAddress } from "../api/addressApi";
const { data, error } = useGetAddress();

// 修改后
import { useGetAddressQuery } from "../api/addressApi";
const { data, error } = useGetAddressQuery();

RTK Query的hook命名规则为use[EndpointName][Query/Mutation]：查询类型用Query后缀，修改类型用Mutation后缀。你的destinationApi应该遵循了该规则，因此能正常运行。

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