React query provider on static site
Answered
Large oak-apple gall posted this in #help-forum
Large oak-apple gallOP
I have static site using server components.
There is only one component only on one page that needs to be dynamic and load some data at runtime. I want to use react query for that.
What is correct placement for react query provider in this case? Wrap only this component? Wrap whole page? Whole app?
If it makes any difference, component is lazy loaded using
Bonus question: imagine in future this project needs another component somewhere far away that should also use react query, how will provider placement change in this case?
There is only one component only on one page that needs to be dynamic and load some data at runtime. I want to use react query for that.
What is correct placement for react query provider in this case? Wrap only this component? Wrap whole page? Whole app?
If it makes any difference, component is lazy loaded using
dynamicBonus question: imagine in future this project needs another component somewhere far away that should also use react query, how will provider placement change in this case?
Answered by B33fb0n3
I would build a GlobalProvider and add the React Query Provider there. Then you are good to go for the future and also maintaince and you can easily use RQ in your single component
5 Replies
@Large oak-apple gall I have static site using server components.
There is only one component only on one page that needs to be dynamic and load some data at runtime. I want to use react query for that.
What is correct placement for react query provider in this case? Wrap only this component? Wrap whole page? Whole app?
If it makes any difference, component is lazy loaded using `dynamic`
Bonus question: imagine in future this project needs another component somewhere far away that should also use react query, how will provider placement change in this case?
I would build a GlobalProvider and add the React Query Provider there. Then you are good to go for the future and also maintaince and you can easily use RQ in your single component
Answer
@B33fb0n3 I would build a GlobalProvider and add the React Query Provider there. Then you are good to go for the future and also maintaince and you can easily use RQ in your single component
Large oak-apple gallOP
So wrapping whole app? Does this approach have negative impact on loading speed?
@Large oak-apple gall So wrapping whole app? Does this approach have negative impact on loading speed?
yes. No it won't have any negative impact when you apply best practices. For details see here: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
Large oak-apple gallOP
I see, thanks
happy to help