Query Slices data within slice with graphquery

Developing with Prismic
1

Hello,

I'm using graphquery to fetch data from a slice inside of a content relationship, which is within a slice too.

So I have my homepage, with slice "project".
Inside that project, I have two slice type, thumbnail & video.

I managed to write the query which looks like this:



  const response = await client.getSingle("homepage", {
    graphQuery: `{
          homepage {
            slices{
              ...on featured_project {
                variation {
                  ...on default {
                    primary {
                      project{
                      ...on project {
                          project_name
                          slices{
                            ...on thumbnail {
                              variation {
                                ...on default {
                                  primary{
                                    image
                                  }
                                }
                              }
                            }
                          }
                      }
                    }
                  }
                }
              }
              }
            }
          }
    }`
  });

(I've also used fetchlinks to just get the project_name that is just in the primary data, and that works.

{slice.primary.project.data.project_client}

and

     fetchLinks: [
       'project.project_name',
       'project.project_client',
    ],
  });
)

But I can't figure out how to show my content with the graphquery, also with showing just the project_name for example. If I remove the fetchlinks and keep with the {slice....} code, it gives me an error.

This is the response I get in my console, the data is being fetched:

Screenshot 2023-06-22 at 13.07.35
Screenshot 2023-06-22 at 13.07.351128×1178 121 KB

3

Hello @ondine

Thanks for reaching out to us.

GraphQuery is an API that allows deep fetching that you are already achieving, and that's great.
Now I believe you want to template the fields. If so, it's the same way templating with the fetchLinks.
In Next.js, here is a doc for templating fields in Slices: https://prismic.io/docs/template-content-nextjs#slices

Let me know if you have any further questions.

Thanks,
Priyanka

4

Thank you Priyanka, Should I put a slicezone inside my slice then?

I've added

 <SliceZone slices={slice.primary.project.data} components={components} />

to my slices/featuredProject/index.js but nothing is showing up there.

I'm familiar with templating in general, but with graphQuery, it looks like there a subtlety that I'm not understanding, is there something in particular to know?

It's the same with the "primary fields" of my project, which on [uid] are showed with {article.data.project_name}

and with fetch links, this works : {slice.primary.project.data.project_name}
but with graph, that code doesn't show anything and renders undefined...

5

It should be:

<SliceZone slices={slice.primary.project.data.project_name} components={components} />

It's difficult for me to debug with the above information. Can you provide me with minimal reproduction?

1 Like
6

Thank you, your answer helped me! I managed to make it work.

For other people looking for that answer, here is the set up in case they need:
I have a slicezone on my index page, which has a slice called "featured project".
In there I have a content relationship field, called "project".

The repeatable "project" type, which has:

  • Project_name
  • Project_client
  • Slicezone (two different slices)

My index is:

 <main className='home-container'>
      <SliceZone slices={response.data.slices} components={components} />
</main>

and

export async function getStaticProps({ previewData }) {
  const client = createClient ({previewData})

  const response = await client.getSingle("homepage", {
    graphQuery: `{
          homepage {
            slices{
              ...on featured_project {
                variation {
                  ...on default {
                    primary {
                      project{
                      ...on project {
                          project_name
                          project_client
                          slices{
                            ...on thumbnail {
                              variation {
                                ...on default {
                                  primary{
                                    image
                                  }
                                }
                              }
                            }
                          }
                      }
                    }
                  }
                }
              }
              }
            }
          }
    }`
  }); 
 
 
  return {
    props: {
      page, response
    } 
  }
}

My slice/featuredproject contains:

 <div className="project-information-container">
          {slice.primary.project.data.project_name} <br/>
          {slice.primary.project.data.project_client}
  </div>
<div className="project-media-container">
            <SliceZone slices={slice.primary.project.data.slices} components={components} />
 </div>
```

And inside that slice called thumbnail, all is normal:

  <PrismicNextImage
  field={slice.primary.image} 
  className="object-cover"
  fill
  />
1 Like