Question 212733 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

2

Answers


  1. 0

    QueryClientProvider provides the context for all queries, meaning that QueryClientProvider must wrap all components that use TanStack Query.

    In your code you use useQuery in app, but QueryClientProvider does not wrap app, it’s inside of it.

    If you were to call useQuery (or useFetchData) in App or View instead, it should work.

    Secondly, you should initiate queryClient outside of the component (in the module scope). Since React is built on multiple re-renders, the query client will be changed once app is re-renderd. Alternatively persist it in a useMemo if you want to keep it in the component.

    // either in module scope
const queryClient1 = new QueryClient();

export default function app() {
  // or memoize in the component
  const queryClient2 = useMemo(() => new QueryClient(), []);
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search