Я следую руководству по запросам 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"
}
Это все равно будет работать. Тем не менее, если вы настаиваете на устранении ошибки. Вы можете импортировать все из buildHooks.
import * as _ from <path_to_buildHooks>
В большинстве случаев путь к buildHooks — "../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks"
Хотя это решит проблему, вам также необходимо знать, что импорт всего из модуля может привести к потенциальным конфликтам, если есть перекрывающиеся имена.
Я до сих пор не решил проблему полностью. Но я могу воспроизвести проблему следующим образом:
with-redux
, тогда я не получаю ошибокТаким образом, можно сказать, что код, предоставленный командой 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
этот код поможет вам
Что бы вы использовали вместо any
, если хотите строгого TS?
Этот код отлично работает в моем случае. Спасибо.
Спасибо. Да, там говорилось, что нужно импортировать хуки сборки, но почему мы должны это делать? почему с другой конфигурацией это работает? А еще я точно скопировал исходный код из команды redux, так что все должно работать, не нужно ничего менять, верно?