Query slice with graphql and use it in the SliceZone

Developing with Prismic
1

I have the following query for fetching all slices from a Course document and it seems to work well;

const cursoQuery = gql`
  query cursoQuery($uid: String) {
    allCursos(uid: $uid) {
      edges {
        node {
          _meta {
            id
            uid
            type
          }
          title
          meta_title
          meta_description
          level
          grade
          slices1 {
            ... on CursoSlices1General_social_card {
              type
              variation {
                ... on CursoSlices1General_social_cardDefaultSlice {
                  primary {
                    title
                    description
                    image
                  }
                }
              }
            }
          }
          slices {
            ... on CursoSlicesCourse_pricing_slice {
              type
              variation {
                ... on CursoSlicesCourse_pricing_sliceDefaultSlice {
                  primary {
                    title
                    description
                  }
                }
              }
            }
            ... on CursoSlicesCourse_curriculum_slice {
              type
              variation {
                ... on CursoSlicesCourse_curriculum_sliceDefaultSlice {
                  primary {
                    title
                  }
                }
              }
            }
            ... on CursoSlicesCourse_header_slice {
              type
              variation {
                ... on CursoSlicesCourse_header_sliceDefaultSlice {
                  primary {
                    title
                    description
                    modality
                    duration
                    time
                    frequency
                    image
                  }
                }
              }
            }
          }
        }
      }
    }
  }

It successfully returns something like this:

image
image834×982 166 KB

my problem is that when I pass it to the SliceZone I get a message saying that the the slice data is not there or might be in the wrong format.

i see that in multiple examples you do something like this

 node{
        body{
          ... on Blog_postBodyPost_text{
            type
            primary{
              rich_text
            }
          }

but body does not exist for me. Any idea on what I might be doing wrong? thanks!

3

Hello @jprzpam

Thanks for reaching out to us.

To make sure, it seems like it's a graphql issue, not a gtaphQuery issue. Slices should come under the body objects. Can you please send me your Prismic repo URL to look into it? You can send me a private message, though.

Thanks,
Priyanka

4

Sent, thank you.

5

Hello @jprzpam

I apologize for being delayed in the response. I was on vacation for a few days.
I have checked your repository and the query you are doing is correct. In your case, you have given the API ID of the SliceZone as "slices," not "body," so all slices come under the "slices" object.

Would you please send me how you integrate these slices into your project?

Thanks,
Priyanka

9

Hello, I got busy with other things and forgot about this issue. What do you mean with how do I integrate these slices into my project? do you mean how I pass them to the slice zone? if so, I do it like this.

        <SliceZone
          resolver={resolver}
          slices={slices}
          sliceProps={({ sliceName }) => ({
            level: sliceName === 'CoursePricingSlice' ? level : null,
          })}
        />

The slice object looks like this:

image
image844×936 141 KB

And I get this error when visiting the page where the slices are displayed.

image
image1562×894 23 KB

Thanks!

12

Hello @jprzpam

I need more information:

  1. Which SliceZone package you are using?
  2. What are you returning as Slices to the page?

Thanks,
Priyanka