Passing additional Properties in SliceZone with SliceProps

Developing with Prismic
1

Hi,

we're trying to pass additional data to the slices via the SliceZone with the sliceProps attribute. However, I"m not seeing any of the data passed in my slices.

We're passing just some test data like so:

interface Props {
  props: any;
}

export default function Resources(props: Props) {
  return (
    <Layout {...props}>
      <SliceZone
        {...props}
        resolver={resolver}
        queryType="single"
        sliceProps={props}
      />
    </Layout>
  );
}

// Fetch content from prismic
// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticProps = useGetStaticProps({
  client: Client(),
  queryType: 'single',
  type: 'resources',
});

However, in my slice, I don't see the additional data getting passed in, just the slice data. Does it get passed in a specific attribute like data or sliceProps or ?

Thanks,

Pete

2

Hey Pete!

The props passed to sliceProps need to be either an object or a function.

  • Could you share with us an example of the Slice's logs to see what they're returning?
  • Which version of next-slicezone are you using?
4

Hi Pau,

thanks for responding.

We are using next-slicezone version 0.0.15

In the slice I'm seeing:

ResourcesTypes
{
  slice_type: 'resources_types',
  slice_label: null,
  items: [
    { image: [Object], header: [Array], url: [Object], number: 2 },
    { image: [Object], header: [Array], url: [Object], number: 2 },
    { image: [Object], header: [Array], url: [Object], number: 3 },
    { image: [Object], header: [Array], url: [Object], number: 3 },
    { image: [Object], header: [Array], url: [Object], number: 2 }
  ],
  primary: { resourcecategories: { link_type: 'Document' } }
}

Just the slice data

Pete

5

Hey there, can you please update to next-slicezone@0.1.2 and try again.
Before 0.1.0, adding the sliceProps property wasn’t a possibility, so this is probably why it's not working.

Let me know how it goes.

6

Hi Pau,

thanks, I'll give that a try and let you know.

Thanks,

Pete

7

Morning Pau,

I updated the next-slicezone to 0.1.2 and still can't seem to get the sliceProps data over to my slice.

If I just pass an object into sliceProps, will all slices get that object ? Does it come thru appended to the other slice data?

Thanks,

Pete

8

Hey there!

Yes, those props will become available in all the Slices. You can pass a random object to the sliceProps instead of the props of the function. And see if that works.

Could you show me the code snippet where you're passing the props and how you're retrieving them in the Slice component?

9

This thread has been closed due to inactivity. Flag to reopen.

11

Hi Pau,

I'm having a similar issue with 'sliceProps' not working at all. I just wanted to check whether this was possible when using Gatsby?

Should the below work? I'm a bit confused why this isn't a built-in feature as it's a pretty common need to pass properties to components.

const test = { message: "testing"};

  return (
    <Layout isHomepage={false} settings={settings} body={body}>
      <Seo title={document_display_name.text} />
      <SliceZone slices={body} components={components} sliceProps={test}/>
    </Layout>
  )
1 Like
15

Hi Ollie,

The thread above is in relation to the next-slicezone package, not the @prismicio/react package's SliceZone.

This is not currently possible with this package. What's your use case for passing props to Slices?

Thanks.

17

Hi Phil,

There might be a better way to do this (please let me know if there is :sweat_smile: ) but I need to pass several functions and variables to the slices, predominately for event listeners that will affect other areas on the website which are not slices.

So far, the only way I seem to be able to pass these properties to the slices is by using the 'context' parameter. Would it not also make sense to add this the 'sliceProps' to all other language packages (incl. gatsby).

Thanks,

19

Hey again Ollie,

I don't know of any alternative to this right now, can you provide me with your exact use case so that I can maybe assist you?

I've created a feature request for this on the @prismicio/react package and made the team aware of your request. You will be able to track the request there.

Thanks.

20

The Team, replied on Github, so it will be best to continue the conversation there.

1 Like
21

Thanks Phil, I'll go and check this out now.

22

It would be great to have a sliceProps param in @prismicio/react package's SliceZone.
My use case is that I want to have a slice that displays the three latest articles.
I could fetch them dynamically in the slice component but I'd like to have it at build time, so fetched in getStaticProps.
In the meantime, I will use context props and pass my 3 articles to all the slices of my page.

23

Hey @taylorollie1 and @Renaud_1,

I replied on GitHub here: [RFC] Passing additional Properties in SliceZone with SliceProps · Issue #113 · prismicio/prismic-react · GitHub

I'd love to hear your feedback if you have any! Thanks :slightly_smiling_face:

1 Like