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?
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.
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.
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 button:
system
(system)
closed as resolved, flag & select 'Something Else' to reopen.
6
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
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.
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
@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:
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.
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:
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} />;
);
};
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?
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.
button: