RTK-запрос не создает перехваты

Я следую руководству по запросам RTK здесь https://redux-toolkit.js.org/tutorials/rtk-query

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Pokemon } from './types'

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
  }),
})

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetPokemonByNameQuery } = pokemonApi

Я получаю сообщение об ошибке при useGetPokemonByNameQuery, говорится, что:

Предполагаемый тип useGetPokemonByName1Query не может быть назван. без ссылки на '../../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks'. Вероятно, это не портативно. Требуется аннотация типа.ts(2742)

Я пробовал искать в Google, но не нашел решения.

Мой пакет.json:

"dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fontsource/roboto": "^5.0.13",
    "@mui/icons-material": "^5.15.20",
    "@mui/material": "^5.15.20",
    "@reduxjs/toolkit": "^2.2.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "uuid": "^10.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/uuid": "^10.0.0",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.3.1"
  }
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
209
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это все равно будет работать. Тем не менее, если вы настаиваете на устранении ошибки. Вы можете импортировать все из buildHooks.

import * as _ from <path_to_buildHooks>

В большинстве случаев путь к buildHooks — "../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks"

Хотя это решит проблему, вам также необходимо знать, что импорт всего из модуля может привести к потенциальным конфликтам, если есть перекрывающиеся имена.

Спасибо. Да, там говорилось, что нужно импортировать хуки сборки, но почему мы должны это делать? почему с другой конфигурацией это работает? А еще я точно скопировал исходный код из команды redux, так что все должно работать, не нужно ничего менять, верно?

Nguyễn Ngọc Hải 02.07.2024 15:45
Ответ принят как подходящий

Я до сих пор не решил проблему полностью. Но я могу воспроизвести проблему следующим образом:

  • Я копирую исходный код, предоставленный командой redux-toolkit, здесь https://redux-toolkit.js.org/tutorials/rtk-query, я ничего не меняю.
  • Если я запущу новое приложение одним из двух способов, описанных здесь https://redux-toolkit.js.org/introduction/getting-started: Vite с нашим шаблоном Redux+TS или Next.js с использованием шаблона with-redux, тогда я не получаю ошибок
  • Только когда я запускаю новое приложение, используя последнюю версию Vite, описанную здесь https://vitejs.dev/guide/, я просто запускаю: npm create vite@latest. Тогда я получаю ошибку.

Таким образом, можно сказать, что код, предоставленный командой reduxjs Toolkit, не содержит ошибок, возможно, потому, что часть конфигурации vite отличается. Но я не могу понять, в чем проблема, основываясь только на сообщении об ошибке из машинописного текста. Думаю, на этом вопрос можно закрыть. Спасибо.

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


type pokemon =
    { username: string, id: number }


export const pokemonApi = createApi({
    reducerPath: 'pokemonApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
    endpoints: (builder) => ({
        getPokemonByName: builder.query<pokemon, string>({
            query: (name) => `pokemon/${name}`,
        }),
        getPokemon: builder.query<pokemon, void>({
            query: () => `pokemon`,
        }),
    }),
})

export const { 
    useGetPokemonByNameQuery,
     useGetPokemonQuery 
    }: { 
        useGetPokemonByNameQuery: TypedUseQuery<pokemon, string, any>, 
        useGetPokemonQuery: TypedUseQuery<pokemon, void, any> } = pokemonApi

этот код поможет вам

Kerim Hajymamedow 06.07.2024 09:08

Что бы вы использовали вместо any, если хотите строгого TS?

Tomty 06.07.2024 18:03

Этот код отлично работает в моем случае. Спасибо.

Deep 13.07.2024 08:17

Другие вопросы по теме

Похожие вопросы

TS2345: аргумент типа AsyncThunkAction<void | AddItem, ItemInput, AsyncThunkConfig>» невозможно назначить параметру типа AnyAction
Redux-toolkit — состояние обновлено, но при его использовании все еще получается начальное значение состояния
Путаница с дополнительными свойствами, хранящимися в состоянии Redux при использовании запроса RTK
Я постоянно получаю начальное значение от редуктора
TypeError набора инструментов Redux: невозможно прочитать свойства undef (чтение «типа») при извлечении данных с помощью Redux Thunk
Увеличение счетчика в редукторе createSlice Redux-Toolkit
Ошибка: не удалось найти значение контекста реакции-редукса; убедитесь, что компонент завернут в <Provider> в собственном приложении React Expo
Мемоизированный селектор повторного выбора с RTKQuery selectFromResult по-прежнему повторно отображает компонент
Почему мое второе значение OnClick Isloading не работает в запросе на мутацию RTK Query?
Как использовать одну и ту же функцию запроса RTK несколько раз с разными параметрами в одном и том же компоненте?