# Reuse slice with same data in two diffetent documents

**URL:** https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338
**Category:** Developing with Prismic
**Tags:** slice-machine
**Created:** [October 5, 2021, 1:01am UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338 "2021-10-05T01:01:36Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![jprzpam](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jprzpam](https://community.prismic.io/u/jprzpam)
#### Post date: [October 5, 2021, 1:01am UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/1 "2021-10-05T01:01:36Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [October 5, 2021, 5:52pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/3 "2021-10-05T17:52:58Z")

</div>

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](https://prismic.io/docs/core-concepts/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](https://prismic.io/docs/core-concepts/link-content-relationship#content-relationship-configuration) inside the `AboutUsPage` Custom Type.

Then, to pull content from another document you will need to add a [GraphQuery](https://prismic.io/docs/technologies/graphquery-rest-api) to your API call to fetch the content of the `ServicesSlice` Slice inside the `HomePage` Custom Type.

---

<div class="post-metadata">

### Author: ![jprzpam](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jprzpam](https://community.prismic.io/u/jprzpam)
#### Post date: [October 5, 2021, 11:45pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/4 "2021-10-05T23:45:58Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [October 6, 2021, 6:17pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/5 "2021-10-06T18:17:05Z")

</div>

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 ❤ button:

> [@Default content for slices](https://community.prismic.io/t/default-content-for-slices/4875/2):
>
> Hey @josselin.milon, thanks for the feedback. We have had internal discussions in the past about creating the possibility to add default values to the fields but we haven't yet got to any conclusion about when or how we would start actually developing this feature. I'm going to mark your thread as an open feature request. If we ever have news about this feature being developed we'll announce it on all of our platforms. Thanks!

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [October 13, 2021, 7:52pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/6 "2021-10-13T19:52:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [October 13, 2021, 10:22pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/7 "2021-10-13T22:22:11Z")

</div>



---

<div class="post-metadata">

### Author: ![jprzpam](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jprzpam](https://community.prismic.io/u/jprzpam)
#### Post date: [October 13, 2021, 10:32pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/8 "2021-10-13T22:32:03Z")

</div>

Continuing the discussion from [Reuse slice with same data in two diffetent documents](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/5):

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.

 ![Screen Shot 2021-10-13 at 17.26.31](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/9f7c89e0af1358c31f1f94f4c5713a7fab6b1757.png)

Thanks!

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [October 14, 2021, 1:27am UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/9 "2021-10-14T01:27:21Z")

</div>

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.

> **[API reference for GraphQuery (fetchLinks v2)](https://prismic.io/docs/technologies/graphquery-rest-api#use-graphquery-with-javascript)**
>
> This shows how to use the Prismic GraphQuery query option to retrieve certain fields and retrieve content from linked documents.

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:

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

```

---

<div class="post-metadata">

### Author: ![jprzpam](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jprzpam](https://community.prismic.io/u/jprzpam)
#### Post date: [October 17, 2021, 10:14pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/11 "2021-10-17T22:14:52Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [October 18, 2021, 8:27pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/12 "2021-10-18T20:27:04Z")

</div>

@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:

> [@CORS error with graphQuery](https://community.prismic.io/t/cors-error-with-graphquery/6955/14):
>
> Hi, @lennart. This issue is related to this [issue](https://community.prismic.io/t/not-able-to-query-slice-machine-slices-with-graphquery/7030/7) as GraphQuery doesn't work with Slice Machine slices and I have already created an issue for this, and we will let you know if we have any updates.

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.

---

<div class="post-metadata">

### Author: ![jprzpam](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jprzpam](https://community.prismic.io/u/jprzpam)
#### Post date: [October 19, 2021, 4:55pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/13 "2021-10-19T16:55:18Z")

</div>

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

Currently my about page would look like this

```auto
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!

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [October 23, 2021, 3:31am UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/14 "2021-10-23T03:31:50Z")

</div>

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](https://nextjs.org/docs/advanced-features/custom-app) file so that the document is ready when the app is initialized, like so:

```auto
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:

```auto
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](https://prismic.io/docs/technologies/launch-an-example-slice-machine-project-next.js) to retrieve a menu Custom Type. [Check out the code](https://github.com/prismicio-community/nextjs-sm-tutorial-series/blob/master/pages/_app.js).

---

<div class="post-metadata">

### Author: ![jprzpam](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jprzpam](https://community.prismic.io/u/jprzpam)
#### Post date: [October 25, 2021, 2:55am UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/15 "2021-10-25T02:55:32Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [October 25, 2021, 7:14pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/16 "2021-10-25T19:14:54Z")

</div>

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](https://prismic.io/docs/technologies/technical-reference-next-slicezone-nextjs#slicezone-) to add additional data to the Slice Zone, in this case. You'll use it to pass the homeData. Like so:

```auto
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.

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [November 2, 2021, 3:27pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/17 "2021-11-02T15:27:40Z")

</div>



---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [December 9, 2021, 5:50pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/18 "2021-12-09T17:50:13Z")

</div>



---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [August 30, 2022, 5:36pm UTC](https://community.prismic.io/t/reuse-slice-with-same-data-in-two-diffetent-documents/7338/19 "2022-08-30T17:36:06Z")

</div>

We have released a new version of the GraphQuery document. Now it has support for Slice Machine.

> **[GraphQuery API Option Technical Reference](https://prismic.io/docs/technologies/graphquery-rest-api)**
>
> This shows how to use the Prismic GraphQuery query option to retrieve certain fields and retrieve content from linked documents.

Please let us know if you have questions, comments, or suggestions.  
Cheers!
