RTK Query在React和TypeScript中生成带有属性’does not exist on type’错误的钩子

huangapple go评论56阅读模式
英文:

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 &#39;@reduxjs/toolkit/query/react&#39;;

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

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

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

store:

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

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

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType&lt;typeof store.getState&gt;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () =&gt; 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;

huangapple
  • 本文由 发表于 2023年5月25日 20:03:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76332066.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定