Fetching Sanity data into Next.js components without prop drilling

Wondering what is the cleanest way to fetch data from Sanity into a specific component (so not pulling data into

/pages

).I have a kind of "site-builder" setup where you can drag and drop components to build up custom pages.
And in this case I want to be able to list all the latest posts from

/pages/articles/[slug].js

into a component called something like

ArticleListingComponent.js

using

*[_type == "article"][0...5]

. Has anyone done something like this and wants to give me a few pointers? Thank you

Until React Server Components mature, this is tough to recommend because all your fetches will be client-side only.
Unfortunately for now I believe the best solution is to do one mega fetch of data at getServersideProps and prop drill it down…

Hi User, thanks for the reply, (love your blog posts on sanity/next). This is where my newness to Next falls short.
Edit: Just puzzled it all together, I thought there was a clever way to bypass prop drilling from the pages folder, but its not that bad once I figured it out. Just passing the _type == article into my global query did the trick

I agree with . The best solution still be to fetch all necessary data in the getStaticProps. But you can of course encapsulate the data loading per component with DataLoader interface. So you can register a DataLoader per Component that that can be used in the SiteBuilder in the DataLoaderRegistry. And then in your getStaticProps function you iterate over all registered DataLoaders and loads (fetches) the data. This is how i have implemented it

any chance you can share a repo for me to frankenstein together?

Unfortunately not. It's a private project we have implemented for the customer.

Of course no problem, thanks anyways.

don't know if it's help but in my pages file i have /blog page where i fetch all my blogi use

getStaticProps

, i'm only load the 5 first one , and i have a pagination button , if the user click on it i get five more post ( pages/api/loadFiveMorePosts ) .But i a user want to read one article i use

getServerSideProps

.No sur if it's helpful or not for you
😕

Thank you that is helpful to know. Currently I have a React contextProvider that pushes my blog posts globally and I can use it at will. But its clever to know I can use the

/pages/api/

as well.