Im working on an framework7-react and react query for data fetching. Initialization was fine, everything works perfectly, but when I want to fetch data with react-query it has this error "No QueryClient set, use QueryClientProvider to set one" and when delete the fetch part, everything became normal. what should I do? how should I fetch my data with react-query in framework7-react?
QueryClientProvider.js:26 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient2 (QueryClientProvider.js:26:11)
at useBaseQuery (useBaseQuery.js:12:21)
at useQuery (useQuery.js:7:10)
at app (app.jsx:12:16)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
app.jsx
import React from 'react'
import { View, App } from "framework7-react";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import {useFetchData} from '../utils/useFetchData'
export default function app() {
const queryClient = new QueryClient();
// const data = useFetchData();
// console.log(data);
// const data = useQuery(["data"], () => fetch("../utils/data.json").then(res => res.json()));
// console.log(data);
//I fetched in 2 ways, and both of them had the same error
return (
<QueryClientProvider client={queryClient}>
<App>
<View main url="/" />
</App>
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
</QueryClientProvider>
)
}
useFetchdata.js
import React from "react";
import { useQuery } from "react-query";
export function useFetchData() {
const data = useQuery(["property"], () =>
fetch("./data.json").then((res) => res.json())
);
return data;
}
you can only call the useFetchData()
hook inside a component that is wrapped in a QueryClientProvider
.
In your Example, you can use the hook in the App
component or in the View
component, because they are beneath the QueryClientProvider
in your component tree:
return (
<QueryClientProvider client={queryClient}>
<App>
<View main url="/" />
</App>
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
</QueryClientProvider>
)
but you can't use the hook in the same component that renders the QueryClientProvider
.