Hi!
Just tried the SliceMachine and think I like it.
However, what is the best practice of using shared information such as a header or a footer?
This is a working example of me passing header, footer and navigation to each page. It works. However, I'm also using Apollo for getting Shopify data and I can't really understand how to mix these two approaches in my Custom app file?
Without Apollo:
export default class App extends NextApp {
static async getInitialProps(appCtx) {
const client = Client();
const header = (await client.getSingle("header")) || {};
const footer = (await client.getSingle("footer")) || {};
const navigation = (await client.getSingle("navigation")) || {};
return {
props: {
header: header,
footer: footer,
navigation: navigation
},
};
}
render() {
const { Component, pageProps, props } = this.props
return (
<ChakraProvider resetCSS theme={theme}>
<Component {...pageProps} header={props.header} footer={props.footer} navigation={props.navigation} />
</ChakraProvider>
)
}
}
With Apollo but without shared layout
function MyApp({ Component, pageProps }) {
const apolloClient = useShopify(pageProps.initialApolloState)
return (
<ApolloProvider client={apolloClient}>
<ChakraProvider resetCSS theme={theme}>
<StoreProvider>
<Component {...pageProps} />
</StoreProvider>
</ChakraProvider>
</ApolloProvider>
)
}