CODEWITHSUNDEEP
typescriptreact-reduxredux-toolkitrtk-query
alcfeoh
alcfeoh

Reputation: 2267

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

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?

Upvotes: 23

Views: 20712

Answers (3)

Sugar Daddy
Sugar Daddy

Reputation: 107

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;

Upvotes: 1

Lin Du
Lin Du

Reputation: 102497

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"

Upvotes: 103

OKi
OKi

Reputation: 199

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

Upvotes: 4

Related Questions