🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Fetching Sanity data into Next.js components without prop drilling

8 replies
Last updated: Mar 31, 2022
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
Mar 30, 2022, 5:24 PM
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…

Mar 30, 2022, 5:38 PM
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
Mar 30, 2022, 6:11 PM
I agree with
user T
. 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
Mar 30, 2022, 6:14 PM
user P
any chance you can share a repo for me to frankenstein together?
Mar 30, 2022, 6:18 PM
user E
Unfortunately not. It's a private project we have implemented for the customer.
Mar 30, 2022, 7:13 PM
Of course no problem, thanks anyways.
Mar 30, 2022, 7:37 PM
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
😕
Mar 31, 2022, 10:04 AM
Thank you
user V
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.
Mar 31, 2022, 10:07 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?