UID for index page

Developing with Prismic
1

Hi all,

Currently trying to set up a page for my new gatsby site that'll resolve to the index page. The uid for the slug can't be empty, has anyone fixed a way of doing this?

I've tried /index but sadly, that needs to be typed in to get the right page.

2

I have the same problem, so I’m using key text as the uid.

This comes with the problem of not being able to fetch by UID, but you can search key text which results in a fairly similar thing.

4

where you able to use the key text for building pages programatically as you would with a UID?

5

Yes, it works for me. What frontend are you using? I am using Gridsome, so can help out with that.

6

Can you show us your linkresolver for this?

7

@Phil I have a computed function that maps page IDs to the slug key text. It’s very hacky and will be sub-optimal for large projects, but it works for me at the moment.

function linkResolver (doc) {
  return parent.pageLinks[doc.id]
}

It would be great to allow / in the UID field :wink:

11

Hi @hi11, I took a look and was able to get this working using the filter option in your gatsby-config.js settings. It might look something like this:

pages: [{
  type: 'Page',
  match: '/',
  filter: data => data.node._meta.uid === 'homepage',
  path: '/hompage-preview',
  component: require.resolve('./src/templates/page.js'),
},{
  type: 'Page',
  match: '/page/:uid',
  filter: data => data.node._meta.uid !== 'homepage',
  path: '/page-preview',
  component: require.resolve('./src/templates/page.js'),
}],

Give something like that a try!

12

@Levi - How would this work with a path like products/my-product? The uid field doesn’t accept the / character at all.

13

@marcellothearcane I haven’t played around with this feature a whole lot, but it seems like you could use the extraPageFields option as shown here to add categories to the url.

14

@marcellothearcane Your use case in Gridsome is more for parent categories in the link resolver.

You’ve got a few choices.

  1. You could use the key text field to create completely arbitrary url paths, though this really isn’t recommended as there’s no validation on the Prismic side.
  2. You can add a content relationship to the document and link to the parent and in your link resolver get the UID of the parent through this. You’ll need to use Fetch Links or GraphQuery(Fetchlinks V2) in the REST API, but it GraphQL you should be able to just grab this info directly.
  3. We’ve worked a new Link Resolver that’s currently in BETA with Slice Machine which makes this process easier, you can test this by spinning up a Slice Machine repo and building your project from there. There’s some documentation for this here. Hopefully eventually in the future we’ll get this rolled out for everyone.

Let me know if you’ve got any questions.

15

@Phil Yes, I’m using option 1. It works, though I do have the problem with the graphql field not searching by it (that you know about I think).

I’ll have a look at the new beta link resolver, thanks!

1 Like
16

Thanks for the help, Levi!

That seems to have fixed it!

Do you know if theres a way of passing classes into prismic-reactjs Rich text renderer?

17

@hi11, yeah you can use an HTML Serializer to change the output of your Rich Text field. And you can provide a function that returns a function in order to pass data into the HTML Serializer. I give an example of this here: