Reuse slice with same data in two diffetent documents

I'm using Prismic with NextJS and Slice Machine for a marketing website and have a ServicesSlice that appears in two custom types of my website, one time in the home page and another time in the about us section. Currently I can add the slice to both documents but whenever I add it the fields come empty.

How can I reuse the ServiceSlice with all it's content in the HomePage custom type to use inside the AboutUsPage custom type so whenever there is a change we don't have to do it in two places?

Hey Juan, thanks for reaching out!

Slice Machine doesn't make the content of the Slices shared between documents. What is shared is the structure and Content modeling of the Slices within the Custom Types.

But this does not mean that you cannot use the content of one document within another. To do this you first have to add a Content Relationship field inside the AboutUsPage Custom Type.

Then, to pull content from another document you will need to add a GraphQuery to your API call to fetch the content of the ServicesSlice Slice inside the HomePage Custom Type.

Thank you! I'll give that a shot.

On the same note, I was wondering if it's possible to have default content on a slice. I have multiple pricing tables on different documents that will share the same information with the exception of the price and maybe some details in specific documents. I would like the slice to default to a single source of truth with the option of editing peer document.

According to what you said one solution could be to create a document that is hidden on the front end and reference to it, but was wondering if you support this feature out of the box.

Thank you and wish you a nice day :slightly_smiling_face:

Hey there!

It wouldn’t be a hidden document. A Content Relationship field allows you to use the content from a linked document directly into another one. The benefit of this is that you can use a single field or Slice instead of making a query to retrieve the entire document. Let me know if you have questions about this.

And about the default content inside documents, it isn’t possible to have default content shared between Slices. We have an open feature request related to it, though. You can share your support for it using the :heart: button:

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

Continuing the discussion from Reuse slice with same data in two diffetent documents:

I added the content relationship to the About Custom Type with an API ID of 'home' but I'm unsure on how to query the contents of the Home Page Custom Type linked. More specifically I would like to query for the ServiceSlice inside Home Page and ideally render it inside the About Custom Type. Both, the Home Page and About Page are 'single' custom types.

This is what I'm able to see on the graphql explorer, nothing that makes reference to the linked document.

Thanks!

Hey @jprzpam!

It's important to keep in mind that GraphQuery is not GraphQL. It just uses a GraphQL-like syntax to choose the fields you wish to retrieve.

Also, the GraphQl API explorer works with GraphQL queries. It isn't a tool that will provide you with the correct format for GraphQueries. The schema is different.

I can help you build your query. I'll need the exact names of the Custom Types and Slices. For example, it's different if home page is a single word or does it have an underscore, etc.

The query could look something like this:

const myGraphQuery = `{
  about {
    home {
      ...on home_page {
        body {
          ...on service_slice {
            non-repeat {
               [ here goes the content of the slice... ]
            }
          }
        }
      }
    } 
  }
}`

Thank you, the distinction between GraphQuery and GraphQL was helpful, I was mixing them both. I would appreciate the help with the query. Here's some info about my Custom Types and slices:

Home Page Custom Type:
Name: HomePage
id: home-page

About Page Custom Type:
Name: AboutPage
id: about-page

Services Custom Slice (used inside Home Page)
Name: ServicesSlice
id: services_slice

Is there a tool that does help to quickly test GraphQuery queries? Thank you!

@jprzpam Thanks for the additional information. The team has informed me that, unfortunately, for the moment, graphQuery is not available for Slice Machine. We have an open issue in the tracker. Whenever we have news or updates about this topic, we'll update this thread:

Sorry for the inconvenience this causes.
In the meantime, I recommend that you do a separate query for the home-page that all its Slices. I understand that this process defeats the purpose of graphQuery with Content relationship fields, but it is the best workaround for the moment.

How would this look like when passing it to the SliceZone?

Currently my about page would look like this

export default function About({ aboutpage, homepage }) {
  return <SliceZone {...aboutpage} resolver={resolver} />
}

export const getStaticProps = async (...args) => {
  const aboutpage = await useGetStaticProps({
    client: Client(),
    type: 'about-page',
    queryType: 'single',
  })(...args)

  const homepage = await useGetStaticProps({
    client: Client(),
    type: 'home-page',
    queryType: 'single',
  })(...args)

  return {
    props: {
      aboutpage: aboutpage.props,
      homepage: homepage.props,
    },
  }
}

How can I specify that I only need the Services Slice and that I also want it to be in between two slices defined in the About Custom Type. Thank you!

Hey there!

Given the fact that GraphQuery is not yet supported and fetchLinks does not access Slices, but only fields at the top level of a document, I can think of a workaround that involves creating the query for the home page in the _app.js file so that the document is ready when the app is initialized, like so:

import React from 'react'
import { Client } from "../prismic-configuration";

import "../styles/globals.css";

export default class MyApp extends NextApp {
  static async getInitialProps(appCtx) {
    const client = Client();
    const home = (await client.getSingle("home")) || {};
    return {
      props: {
        home: home
      },
    };
  }

  render() {
    const { Component, pageProps, props } = this.props
    return (
      <Component {...pageProps} home={props.home} />
    )
  }
}

Then you can access the home document from the props in your pages, for example, in your [uid].js file:

const About = (props) => {
// Here you'd save the data from the Home document
 const homeData = props.home.data
  return (
     <SliceZone {...props} resolver={resolver} />;
  );
};

We do this in the project of the Next.js tutorial series to retrieve a menu Custom Type. Check out the code.

Oh I understand that, but how can I specify that I need the Services Slice from Home page and need it in between two specific slices inside the About Custom Type?

I have the following:

HomePage Custom Type Slices:

  • Banner
  • Services
  • Contact

AboutPage Custom Type Slices:

  • Banner
  • Team
  • History

and need to display in the About Page

  • Banner
  • Services (from home)
  • Team
  • History

How would that look like? Thank you!

You'll need to add a few more lines of code to tweak the Slice Zone. To place the Slice between two specific Slices, I recommend that you create an additional EmptySlice inside the About page, then you'll be able to replace that empty Slice with the Services Slice later.

Use the sliceProps parameter to add additional data to the Slice Zone, in this case. You'll use it to pass the homeData. Like so:

const About = (props) => {
// Here you'd save the data from the Home document
 const homeData = props.home.data
  return (
     <SliceZone {...props} resolver={resolver} sliceProps={homeData} />;
  ); 
};

After this, the data from the homepage will be available in all the Slices. If you access the props inside the EmptySlice component, you'll see the metadata and all the slices from the home.