Вопрос или проблема
Итак, я ищу решение этой проблемы, нет очевидной причины, и большинство тем, которые я нашел, связаны с ошибками в зависимостях, которых у меня, похоже, нет
Ошибка стандартная: “Не установлен QueryClient, используйте QueryClientProvider, чтобы установить его”
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import IncidentBar from './app/IncidentBar';
const queryClient = new QueryClient();
ReactDOM.render(
<QueryClientProvider client={queryClient}>
<IncidentBar/>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>,
document.getElementById('app')
);
Инцидент Бар
import React, { useEffect, useState, useRef } from 'react'
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
const IncidentBar = () => {
const fetchStatus = async () => {
const { data } = await axios.get('...url с данными...');
return data;
}
const { data: incidentData } = useQuery('incidentStatus', fetchStatus)
console.warn(incidentData)
return (
<div className="incident-container">
<span className="mt-sm">
<span className="mr-2">Уведомление:</span>
<a href="https://место, где можно посмотреть статусы">
сообщение об ошибке будет здесь
</a>
</span>
</div>
)
}
export default IncidentBar
версии в package.json
"@tanstack/react-query": "^4.36.1",
"@tanstack/react-query-devtools": "^4.36.1",
Версии в lock
"node_modules/@tanstack/match-sorter-utils": {
"version": "8.19.4",
"resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
"integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
"dependencies": {
"remove-accents": "0.5.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/query-core": {
"version": "4.36.1",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz",
"integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/react-query": {
"version": "4.36.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz",
"integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==",
"dependencies": {
"@tanstack/query-core": "4.36.1",
"use-sync-external-store": "^1.2.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-native": "*"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/@tanstack/react-query-devtools": {
"version": "4.36.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.36.1.tgz",
"integrity": "sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==",
"dependencies": {
"@tanstack/match-sorter-utils": "^8.7.0",
"superjson": "^1.10.0",
"use-sync-external-store": "^1.2.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^4.36.1",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
Пробовал перемещать QueryClientProvider и компонент приложения Incident Bar, а также перемещать IncidentBar в любое другое место приложения
Ответ или решение
Чтобы исправить ошибку "No QueryClient set, use QueryClientProvider to set one" в вашем приложении с использованием Tanstack React Query, убедитесь, что вы правильно настроили QueryClientProvider и метод useQuery. Вот несколько шагов, которые могут помочь вам решить проблему:
-
Проверьте структуру вашего
index.tsxфайла: Код, который вы предоставили, выглядит корректно. Убедитесь, что этот файл действительно является точкой входа вашего приложения и что компонентIncidentBarправильно помещен внутриQueryClientProvider.Вот ваш корректный код для
index.tsx, который можно использовать:import React from 'react'; import ReactDOM from 'react-dom'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import IncidentBar from './app/IncidentBar'; const queryClient = new QueryClient(); ReactDOM.render( <QueryClientProvider client={queryClient}> <IncidentBar /> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider>, document.getElementById('app') ); -
Проверьте компонент
IncidentBar: Убедитесь, что внутри компонентаIncidentBarвы используете хуки React правильно и что ты не вызываешьuseQueryвне компонента или условия. Ваша реализация выглядит хорошо, но (на всякий случай) вот как должен выглядеть компонентIncidentBar:import React from 'react'; import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; const IncidentBar = () => { const fetchStatus = async () => { const { data } = await axios.get('...data url...'); return data; }; const { data: incidentData, error } = useQuery('incidentStatus', fetchStatus); console.warn(incidentData); return ( <div className="incident-container"> <span className="mt-sm"> <span className="mr-2">Notice:</span> <a href="https://a place you can look at statuses"> {error ? 'Произошла ошибка' : incidentData ? 'Данные успешно загружены' : 'Загрузка...'} </a> </span> </div> ); }; export default IncidentBar; -
Проверьте порядок загрузки компонентов: Если
IncidentBarиспользуется внеQueryClientProvider, это вызовет указанную вами ошибку. Убедитесь, что нет других компонентов, которые могут вызыватьuseQueryвне контекстаQueryClientProvider. -
Проверка окружения разработки: Убедитесь, что у вас нет ошибок в консоли, которые могут мешать правильно выполнять реконтекст. Иногда конфликты в версиях React или других библиотек могут вызывать подобные проблемы.
-
Обновление пакетов: Убедитесь, что версии библиотек
@tanstack/react-queryи@tanstack/react-query-devtoolsсоответствуют друг другу. Вы используете одинаковую версию (4.36.1) в вашем файлеpackage.json, что является хорошей практикой. -
Изолированное тестирование: Если проблема сохраняется, попробуйте создать минимальное приложение только с React Query и базовым запросом. Это поможет вам точно определить, в чем проблема.
Если все вышеперечисленные шаги не помогли, убедитесь, что нет сторонних библиотек или специфичных конфигураций, которые могут вмешиваться в поведение React Query. Удачи!