Best way to access Sanity CMS data in a Next.js app using React Context or fetch query in route layout file.

Hey y'all.I'm migrating an app from Gatsby to Next (using v13, and the

pages

directory) keeping Sanity as the CMS (of course).I have a

settings

document type (singleton) set up in my Studio with fields for site title, brand colors, social contact points etc...
My question is, what's the best way to access this data in a component, such as a header or footer?
The pervious Gatsby version used

useStaticQuery

in the header and footer components to get the settings data.
A bit of googling lead me to articles that suggest wrapping the app with React Context, and populating its initial state value with the

settings

data from a Sanity client fetch call? Then consuming the context on a component as needed.
Is this the best way to go about this?
Apologies if this is n00b question - I'd appreciate a bit of direction on how best to accomplish this.

♥️

I actually have an app context just for an avatar.
We have a weird situation where we can't have one nav in a layout/document file so the nav is an individual component on every page. Nobody wants to see the image popping in and out reloading on every route change so I have it stored there in as a data URI and backed up behind that from localStorage.

How often do the values change?

Thanks for chiming in .The values shouldn’t change often, i think wrapping with an app context is probably my best bet here.

Although from what I’ve read since posting, if I move to using the /app directory features in Next 13, I could use a Sanity fetch query in a route layout file, and pass as props to a header / footer
as shown here .

Ah, yeah, based on my understanding from when the features debuted, I suppose that makes a lot of sense as well. I am actually behind the curve on the /app directory side of things. Lemme know how it goes!

Hey , do you have any code you can share with me showing how you implemented the app context as mentioned above?I've been playing around with wrapping the entire app in an

<AppContext.Provider>

(after reverting to using the

/pages

directory) - but I keep getting errors when trying to read values from the context?

I can't be super specific because of the nature of the project, but the broad steps I am using are• in _app import something called, say, ExampleProvider and wrap it around the page component just like any other JSX
• The file ExampleProvider exports a const equal to a null createContext and exports a function named, to extend the example, ExampleProvider which has as its only prop { children } destructured.
• Inside there's a useState pattern of variable and setter, and and it returns an actual context provider (the const I named earlier in the file) with a value prop set to both the value and setter, destructured
• On pages where I need to actively use it, I import ExampleProvider just as I did in _app
• Inside that page, I destructure the contents of it such that it matches the state setter inside the actual file being imported. For example:

and then in a page

so that I can both read the value, and also change it so that whatever I change it to is the 'new' thing-read-everywhere

In our case it's super necessary because I need the nav to only be a reader, but I need the profile page to change the picture so that there's an updated thing for it to always read

Thank you for the nice walkthrough here 👏 I've nearly got it working as originally planned.I appreciate the time you've taken to demo this example, it really helped me figure out where I was going wrong and breaking things
♥️

No problem Aaron!
When it comes to context and providers, I have literally copied off of people before and didn't understand what was going on right away.

It was so confusing that when it finally worked right I swore I just got lucky because I didn't catch what I did differently work actually work that time
🙂