React query provider on static site
Answered
Sphecid wasp posted this in #help-forum
Sphecid waspOP
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
@Sphecid wasp 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
Sphecid waspOP
So wrapping whole app? Does this approach have negative impact on loading speed?
@Sphecid wasp 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
Sphecid waspOP
I see, thanks
happy to help