how should I fetch my data with react-query in framework7-react?

Question

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;
}

Answer 1

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.