RTK Query генерирует хуки со свойством «не существует для типа» ошибка в React с TypeScript

Я изменил свой todo list с Redux Toolkit на RTK Query и в компоненте todoApi который отвечает за основной функционал RTK Query при экспорте хуков, которые создает сам RTK, над каждым хуком появляется ошибка Свойство 'useFetchTodosQuery' не существует для типа '{ fetchTodos: ApiEndpointQuery<QueryDefinition<void, BaseQueryFn<string | FetchArgs, неизвестно, FetchBaseQueryError, {}, FetchBaseQueryMeta>, никогда, Todo[], "todoApi">, { . .; }>; addTodo: ApiEndpointMutation<...>; removeTodo: ApiEndpointMutation<...>; } & { ...; }'.ts(2339)

Как мне кажется ошибка появляется из-за каких-то перебоев в зависимостях. Я перепробовал все известные мне методы, обновил и переустановил все, что связано с редуксом, реакцией, тс. Я даже пытался изменить npm на пряжу и переустановить все, и ничто не может исправить эту ошибку. Я тоже часами переписывался с GPT-4, отлаживал с ним по поводу переустановки и всего, он в принципе тоже сдался. Очень надеюсь, что кто-то сталкивался с этой ошибкой или знает, как ее исправить. Большое спасибо заранее мой код ниже. 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;

магазин:

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;

60
1

Ответ:

Решено

Эти хуки живут на api, а не на api.endoints:

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

Интересные вопросы для изучения