Вопрос или проблема
Я сталкиваюсь с проблемой с useQuery в моем проекте на TypeScript React. Вот код:
export const useGetMovieList = () =>
useQuery(['fetchMovies'], () => fetchMovies());
Это приводит к следующей ошибке:
ERROR in src/hooks/useGetMovieList.tsx:4:47
TS2769: Нет перегрузки, соответствующей этому вызову.
Перегрузка 1 из 3, '(options: DefinedInitialDataOptions<unknown, Error, unknown, QueryKey>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<unknown, Error>', вызвала следующую ошибку.
Аргумент типа 'string[]' не может быть присвоен параметру типа 'DefinedInitialDataOptions<unknown, Error, unknown, QueryKey>'.
Свойство 'queryKey' отсутствует в типе 'string[]', но требуется в типе 'UseQueryOptions<unknown, Error, unknown, QueryKey>'.
Перегрузка 2 из 3, '(options: UndefinedInitialDataOptions<unknown, Error, unknown, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', вызвала следующую ошибку.
Аргумент типа 'string[]' не может быть присвоен параметру типа 'UndefinedInitialDataOptions<unknown, Error, unknown, QueryKey>'.
Тип 'string[]' не может быть присвоен типу 'UseQueryOptions<unknown, Error, unknown, QueryKey>'.
Перегрузка 3 из 3, '(options: UseQueryOptions<unknown, Error, unknown, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', вызвала следующую ошибку.
Аргумент типа 'string[]' не может быть присвоен параметру типа 'UseQueryOptions<unknown, Error, unknown, QueryKey>'.
Свойство 'queryKey' отсутствует в типе 'string[]', но требуется в типе 'UseQueryOptions<unknown, Error, unknown, QueryKey>'.
Тем не менее, в другом проекте у меня есть очень похожий фрагмент кода, который работает без проблем:
export const useGetLogout = () =>
useQuery(['logout'], () => getLogout);
Это работает без каких-либо проблем. Мне интересно, что может быть не так с моим кодом useGetMovieList. Есть ли разница в том, как я обрабатываю ключ или параметры useQuery?
Буду признателен за любую помощь или идеи!
export const useGetMovieList = () =>
useQuery({
queryKey: ['fetchMovies'],
queryFn: fetchMovies
});
Этот метод работает хорошо, но я хочу следовать методике кода проекта, который я упомянул.
Ответ или решение
Ошибка TS2769, с которой вы столкнулись в вашем проекте на TypeScript с использованием useQuery, связана с неправильным форматом передаваемых аргументов. В вашем коде:
export const useGetMovieList = () =>
useQuery(['fetchMovies'], () => fetchMovies());вы передаете массив строк ['fetchMovies'] в качестве первого аргумента, который useQuery ожидает получать в формате QueryKey. Однако в более новых версиях React Query useQuery требует, чтобы первый аргумент был объектом, содержащим как ключ запроса, так и другие опции.
Ваша ошибка возникает, потому что TypeScript не может сопоставить переданный массив ['fetchMovies'] с ожидаемыми параметрами, которые включают в себя queryKey и queryFn.
Решение проблемы
Для решения этой проблемы вам действительно нужно передавать объект с ключом запроса и функцией:
export const useGetMovieList = () =>
useQuery({
queryKey: ['fetchMovies'],
queryFn: fetchMovies
});Этот код корректно устанавливает queryKey и queryFn, что приводит к успешному выполнению useQuery без ошибок TypeScript.
Почему ваш другой проект работает?
Ваш другой проект, который использует код:
export const useGetLogout = () =>
useQuery(['logout'], () => getLogout);работает, скорее всего, потому что он использует более старую версию библиотеки React Query, где могла быть разница в типах и сигнатурах функций. В более ранних версиях, использование массива как первого аргумента могло работать корректно.
Заключение
Следовательно, чтобы обеспечить совместимость и избежать дальнейших ошибок, рекомендуется использовать формат, который включает в себя объект с обоими значениями queryKey и queryFn. Таким образом, ваше исправление кода выглядит следующим образом:
export const useGetMovieList = () =>
useQuery({
queryKey: ['fetchMovies'],
queryFn: fetchMovies
});Это не только устраняет текущую ошибку, но и делает ваш код более понятным и соответствующим современным стандартам React Query.