typescriptreduxrtk-queryreact-scripts

RTK Query generating hooks with property 'does not exist on type' error in React with TypeScript


I modified my todo list from Redux Toolkit to RTK Query and in the todoApi component which is responsible for the main functionality of RTK Query when exporting hooks that RTK itself creates, an error appears above each hook Property 'useFetchTodosQuery' does not exist on type '{ fetchTodos: ApiEndpointQuery<QueryDefinition<void, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, never, Todo[], "todoApi">, { . .; }>; addTodo: ApiEndpointMutation<...>; removeTodo: ApiEndpointMutation<...>; } & { ...; }'.ts(2339)

As it seems to me the error appears because of some faults in dependencies. I've tried all the methods I know, updated and reinstalled everything related to redux, react, ts. I even tried changing npm to yarn and reinstalling everything and nothing can fix this error. I also spent hours of correspondence with GPT-4 debugging with him about reinstalling and everything, he basically gave up too. I really hope someone has encountered this error or knows how to fix it. Many thanks in advance my code below. todoApi:

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

export interface Todo {
    userId: number,
    id: number,
    title: string,
    completed: boolean
}

export const todoApi = createApi({
  reducerPath: 'todoApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3004/' }),
  endpoints: (builder) => ({
    fetchTodos: builder.query<Todo[], void>({
      query: () => 'todos',
    }),
    addTodo: builder.mutation<Todo, Partial<Todo>>({
      query: (newTodo) => ({
        url: 'todos',
        method: 'POST',
        body: newTodo,
      }),
    }),
    removeTodo: builder.mutation<void, number>({
      query: (todoId) => ({
        url: `todos/${todoId}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const {useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation,} = todoApi.endpoints;

store:

import { configureStore } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import { todoApi } from './todoApi';

export const store = configureStore({
  reducer: {
    [todoApi.reducerPath]: todoApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(todoApi.middleware),
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;

export default store;

Solution

  • Those hooks live on api, not on api.endoints:

    export const {useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation,} = todoApi;