19

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?

phry
  • 35,762
  • 5
  • 67
  • 81
alcfeoh
  • 2,147
  • 1
  • 18
  • 33

3 Answers3

79

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"
Lin Du
  • 88,126
  • 95
  • 281
  • 483
  • 2
    Fixed my issue, was staring at docs for a hot minute like, "This should just work, but it isn't..." – Budhead2004 Sep 10 '21 at 02:24
  • 2
    The magic of auto import somethimes gets it wrong. Daysaver! – Gie Spaepen Oct 26 '21 at 06: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. – fullStackChris Nov 04 '21 at 12:52
  • In my case I had to update the typescript dependency to the latest version to resolve this issue. – Manath Nov 07 '21 at 02: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 05 '22 at 16:38
1

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

OKi
  • 169
  • 1
  • 6
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;
Dr Strange
  • 87
  • 1
  • 5