英文:
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;
英文:
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;
答案1
得分: 1
Those hooks live on api
, not on api.endoints
:
export const {useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation,} = todoApi;
英文:
Those hooks live on api
, not on api.endoints
:
export const {useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation,} = todoApi;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论