RTK Query createApi results in: "Property '....' does not exist on type 'Api<BaseQueryFn>"

Question

The following code uses RTK query to create a 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;

The last line of code throws a Typescript compile-time error:

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

My code is adapted from https://redux-toolkit.js.org/rtk-query/usage-with-typescript using Typescript 4.3.5.

I can't see what's wrong with it. Any ideas?

Answer 1

Make sure you import the createApi and fetchBaseQuery functions from @reduxjs/toolkit/query/react module rather than @reduxjs/toolkit/dist/query.

It should be:

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

NOT:

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

---

UPDATE

Also, see official documentation API Slices: React Hooks

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:

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

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

Package versions:

"typescript": "^4.3.5",
"@reduxjs/toolkit": "^1.6.1"