score:0
queryclientprovider
is a react context provider. in react, you access the context via hooks because there is no guaranteed universal context. the hook returns you the most immediate context from the caller component's ancestors.
you cannot export it from app.js
because it does not have a queryclientprovider
above it. you could work around it. but that would not work either. you can only call the hook within a component and you cannot export something from inside the component. there is also the possibility of the whole site re-rendering with every request depending on your implementation.
overall, it seems like a bad idea.
score:0
there are basically three reasons why usequeryclient
is preferred:
- it decouples your app from the actual implementation (the biggest win for me). this is especially relevant when doing testing. for example, when testing erroneous endpoints, react-query will do 3 retries with exponential backoff. that means your tests take longer and might even time-out for those cases. this can be solved by turning off retries for tests globally, via the queryclient. you can just provide a different queryclient to wrap your component in your test that has retries turned off.
- it is sometimes necessary to create the queryclient inside the app component (stable, on react state or an instance ref). for example, if you need to closure over values provided from another hook in your defaults passed to the queryclient, or, when doing server-side-rendering, where this is advised to avoid leaking data between requests and users.
- react-query internally uses
usequeryclient
to get the nearest queryclient from the provider. so you need to create the provider anyways.
score:1
yes, i think i got your doubt.
you can do this, is perfectly fine;
// app.js
export const queryclient = new queryclient();
this is mostly how providers and context works, is just a bag to store global variables, and you will have access to the actual instance of that variable inside your reactcomponenttree.
that's why your <app/>
must be wrapped with the provider to provide that context and use it from inside with usevariable()
**
the thing is react-query provides functionalities that are tied to the react lyfecycle, and the preferable magic happens thanks to the usequery()
module and you won't be able to use that externally.
but, if you extract just the queryclient to be called outside from react that could works. you just have to be aware of the implementation for the functionality that you will be using, mostly should works because tanner has known of separation of concerns, so probably the queryclient provide specifics functions decoupled from react or any hook. still be careful. and you can check the implementation on his repo, and ask more in deep to tanner directly, is a workaholic active on twitter xd, https://github.com/tannerlinsley.
Source: stackoverflow.com
Related Query
- Why is it that I can't use react and express library from global space(installed via npm i -g pkgName) but I can use react-scripts from global space
- why should we use import React from 'react'
- Why does React Router v6 seem unable to remove query string param from URL?
- How to use the GraphQL Get query from aws in React
- Why use useQueryClient from react-query library?
- Why are other images from media library displaying in react native / expo project?
- use query hook react Apollo conditional call
- Why shouldn't I use catch() to handle errors in React useEffect API calls?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- Is it possible to use Material UI library with React Native?
- React Hooks - How to get parameter value from query string
- React testing library how to use waitFor
- React Context API not working from custom NPM component library
- React Use RouteComponentProps - Type '{}' is missing the following properties from type 'Readonly<RouteComponentProps<{}
- Why do we need to use import 'babel-polyfill'; in react components?
- Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?
- React Native - Why we use the tintColor property for Image component?
- Why cannot I redirect my React app on Heroku from http to https?
- Why is my React component library not tree-shakable?
- How to use React Context with useState hook to share state from different components?
- use predefine react component from reagent?
- React Apollo: Dynamically update GraphQL query from Component state
- How to use react components from other files
- Why do I need import React statement even if I don't use React explicitly?
- Use components from two versions of the same library (npm / Material UI in my case)
- how to import data in react from a js file to use in components
- Why does React have to use setState for state update?
- If 'React' is the default export from 'react', Why can't we use some other name instead of 'React'
- Why use React CreateReactClass?
- why should I not use CDN for react & babel?
More Query from same tag
- React JS: render child according to received state
- Json server Data is not Fetching Correctly in react
- How to fetch axios post request response as a table
- React Virtualized MultiGrid with Infinite Loader
- Is there a way to treat React components as strings?
- Bind input field to grid component
- Broadly, I'm looking for ways to possibly condense my very repetitious code. Specifically, trying to access multiple states with the same function
- useEffect runs twice as much for each message sent
- How Do I layout this CSS grids template
- reactjs conditional component methods based on configuration object
- react plotly js with typescript
- How to get value from React Select Form
- is there any way to run React + Django in same project without running npm run build again and again?
- How to Create 3(country,state and city) dropdowns that populates data with each other in react js
- Why Todo Item only save to localStorage when hit submit button two times?
- Spread Array of Objects in JavaScript
- Navbar not displaying correctly in Reactjs
- Create React App production build succeeds but produces code with errors
- How to submit post/put request to Django rest API via React front end?
- Reactjs: How do i send a fetched API data from a component to a dynamic route component?
- Button Click In React
- How to make invisible react-google-recaptcha, Formik and yup work together?
- What is wrong with this useReducer react code?
- Material-table: How to change disable action button if my rowdata.status = cancelled
- Trigger child method from Parent without Ref
- How can I mock the window.alert method in jest?
- React Redux dispatch action after another action
- Learning React with Typescript
- Mobx - runInAction() usage. Why do we need it?
- Map is not defined React JS