SliceMachine with Apollo

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} />

With Apollo but without shared layout
function MyApp({ Component, pageProps }) {

  const apolloClient = useShopify(pageProps.initialApolloState)
  return (
    <ApolloProvider client={apolloClient}>
      <ChakraProvider resetCSS theme={theme}>
          <Component {...pageProps} />

Hi Robert,

I'm glad you're enjoying exploring the process so far.

Unfortunately Slicemachine isn't available just yet, but the team are actively working on it. Fingers crossed a Beta will be out fairly soon.

In the meantime I would recommend working with the rest API and mixing your shopify content with getStaticProps as we recommended for Arnas here:


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.