Next.js - How to Save a Sanity Fetch As Global Properties

4 replies
Last updated: Nov 3, 2020
Does anyone have experience in saving a sanity fetch as global properties in next.js, which subsequently can be used for components such as a header, footer etc?
Thanks in advance
Nov 3, 2020, 8:36 AM
I think you should use reacts Context for this. Make a context provider and wrap your app in it. All page props then are reusable in its components. This will give you an idea:
_app.js

import { AppContext } from "./useAppContext";

function MyApp({ Component, pageProps }) {
  const { myGlobalProp } = pageProps;

  return (
    <AppContext.Provider value={{ myGlobalProp }}>
      <Component {...pageProps} />
    </AppContext.Provider>
  );
}

export default MyApp;
useAppContext.js

import { createContext, useContext } from "react";

export const AppContext = createContext(null);
export const useAppContext = () => useContext(AppContext);
myComponent.js

import { useAppContext } from "./useAppContext";

export const MyComponent = () => {
  const { myGlobalProp } = useAppContext();
  return <div>{ myGlobalProp }</div>
};
Nov 3, 2020, 8:50 AM
Nice thank you! I'll give it a try
Nov 3, 2020, 9:05 AM
user B
and
user B
- I know that i should insert my data fetched data into "value={{ myGlobalProp }}", so i can acces it globally - but can you tell me, if I'm supoosed to fetch the data from sanity in "useAppContext.js" or "_app.js"?
Hope , I'm not too much of a bother - thanks in advance.
Nov 3, 2020, 1:45 PM
Nov 3, 2020, 1:47 PM

Sanity.io – build remarkable experiences at scale

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

Categorized in