prismicio/prismic-helpers

V2 Incompatible with gatsby-source-prismic?

Closed this issue · 2 comments

I'm encountering an issue with this package (version 2.0.0-beta.3) when using <PrismicLink/> from @prismicio/react .

When passing the document prop to the PrismicLink component like so

<PrismicLink document={doc}>
    Click Here
</PrismicLink>

I get the following error

image

slugs is not a valid field to query on a document type in gatsby-source-prismic so it isn't possible to just add this field to my query. This is also supported by this comment I found in the source code of this repo.

slug: prismicDocument.slugs[0], // Slug field is not available with GraphQl

Does this indicate that latest beta versions of @prismicio/react and its peer dependencies are not currently supported for use in Gatsby projects?

Hey @justinluttrell, thanks for bringing up this issue.

<PrismicLink> expects a full Prismic document if you use the document prop. In the case of Gatsby, you don't have access to the full document unless you query for each field individually. And like you found, slugs is not available (this should probably be added to the Gatsby plugin, however).

Rather than use the document prop when using Gatsby, you should use the href prop instead. The href prop accepts a string URL like a normal <a> element. Gatsby gives this to you with the url field on all Link and Prismic Document fields. The url field has already run through your Link Resolver (if one was given in your plugin options) so it acts identically to using the document or field prop for <PrismicLink>.

I hope that makes sense. If not, please let me know and I can explain further. Thanks!

@justinluttrell I just published @prismicio/helpers@v2.0.0-beta.5 which supports generating URLs for documents without a slugs field. You can update your project with the following command:

npm update @prismicio/helpers

This may not fix your issue as it relies on how you query your document in Gatsby, so I would still recommend querying for the url field instead.