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?

Cuda

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"

Serf

Fixed my issue, was staring at docs for a hot minute like, "This should just work, but it isn't..." – Tajo

The magic of auto import somethimes gets it wrong. Daysaver! – Cunha

If you are using the proper import path but still getting this type error, install typescript to your project to get the warning to go away. I found I didn't have typescript in my dev dependencies yet. – Autotoxin

In my case I had to update the typescript dependency to the latest version to resolve this issue. – Boehmenism

Wow this is such a subtle issue that's caused by auto-importing which works great 9 out of 10 times, this resolved my issue! – Ethyne

Answer 2

Also don't forget to add use and Query to your exported hook's name.

For example:

name of your endpoint: getPhotoList

name of the hook to be exported: useGetPhotoListQuery

John

This was my mistake. – Dwain

Answer 3

I forgot to wrap the export with useMutation and that's what was causing issue for me.
*classic virgin nuub mistake

from

export const { signInUser } = authApi;

to

export const { useSignInUserMutation } = authApi;

Conceptacle