20

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?

3 Answers 3

83

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"
5
  • 2
    Fixed my issue, was staring at docs for a hot minute like, "This should just work, but it isn't..." Sep 10, 2021 at 2:24
  • 2
    The magic of auto import somethimes gets it wrong. Daysaver! Oct 26, 2021 at 6:33
  • 3
    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. Nov 4, 2021 at 12:52
  • In my case I had to update the typescript dependency to the latest version to resolve this issue.
    – Manath
    Nov 7, 2021 at 2:50
  • 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!
    – cerwind
    Oct 5, 2022 at 16:38
3

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

1
0

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

from

export const { signInUser } = authApi;

to

export const { useSignInUserMutation } = authApi;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.