Ошибка «Ожидал 1–2 аргумента, но получил 3» в useQuery с React Query и TypeScript

Я использую useQuery из React Query в своем проекте React Native для получения результатов в реальном времени. Я хочу передать три аргумента: ключ запроса, функцию выборки и объект параметров. Однако я столкнулся с ошибкой: «Ожидал 1–2 аргумента, но получил 3.ts(2554)».

 const { data, error, isLoading, refetch } = useQuery(
    ['liveScores', selectedDate.date, selectedTimeZone],
    () => fetchLiveScore(selectedDate.date, selectedTimeZone),
    {
      keepPreviousData: true,
      onSuccess: (data) => {
        setFilteredMatches(data.data);
        const initialExpandState = Object.values(data.data).reduce((acc: any, item: any) => {
          acc[item[0].league.name] = true;
          return acc;
        }, {});
        setExpandCard(initialExpandState);
      },
    }
  );

Я пытался убедиться, что все типы определены правильно, но ошибка не устранена.

Вот импортные и государственные декларации:

import { useQuery } from 'react-query';
import fetchLiveScore from '../api/liveScores';

const [selectedDate, setSelectedDate] = useState<DateItem>({
  id: new Date().getTime(),
  date: new Date().toISOString().split('T')[0]
});
const [selectedTimeZone, setSelectedTimeZone] = useState(
  Intl.DateTimeFormat().resolvedOptions().timeZone
);
const [filteredMatches, setFilteredMatches] = useState([]);
const [expandCard, setExpandCard] = useState<{ [key: string]: boolean }>({});

Это мой настоящий крючок

useEffect(() => {
    const getLiveScores = async () => {

      try {

        if (selectedDate) {
          setLoading(true)
          const data = await fetchLiveScore(selectedDate.date, selectedTimeZone);
          setMatches(data.data);
          setFilteredMatches(data.data)
          const initialExpandState = Object.values(data.data).reduce((acc: any, item: any) => {
            acc[item[0].league.name] = true;
            return acc;
          }, {});

          setExpandCard(initialExpandState);
          setIsError(null)
          setRefreshing(false);
        }
      }
      catch (error: any) {
        console.error('Error fetching live scores:', error);
        setIsError(error)
        throw error;
      }
      finally {
        setLoading(false);
      }
    }

    getLiveScores()
  }, [selectedDate, refreshing])

Как я могу правильно использовать useQuery с тремя аргументами в этом контексте? Любая помощь будет оценена по достоинству.

Что я пробовал?

Я дважды проверил определение функции useQuery и убедился, что моя функция выборки и объект параметров правильно структурированы. Я также просмотрел документацию React Query, но не смог найти решение этой конкретной ошибки TypeScript.

Чего я ожидал? Я ожидал, что функция useQuery примет три аргумента: ключ запроса, функцию выборки и объект параметров без каких-либо ошибок TypeScript.

Как я могу правильно использовать useQuery с тремя аргументами в этом контексте? Любая помощь будет оценена по достоинству.

Это действительно поддерживается? Я подумал, что вы можете либо использовать ярлык с двумя аргументами, либо создать целый объект с queryFn и queryKey среди других параметров и передать его как единственный аргумент. Пожалуйста, укажите соответствующую документацию, поддерживающую форму с 3 аргументами. А также разместите свой package.json — возможно, такой формат появился совсем недавно и ваша версия его не поддерживает.

STerliakov 14.07.2024 20:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Подпись, которую вы описываете, действительна в версии 3 , но не в версии 4 или версии 5.

Вероятно, вы смотрите не ту версию документации.

Альтернативно у вас может быть загружено несколько конфликтующих версий, поскольку версия 3 — это отдельный проект в npm: Версия 3 , Версия >=4.

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