Using with gatsby-source-prismic

[antonborysov]

I'm trying to use gatsby-transfomer-rehype with gatsby-source-prismic. Seems like sourcing the data does not work. The htmlRehype fields show up empty in GraphQL.

The HTML source in prismic is located in prismicBlogPost.data.content.html

So, I've tried addressing the source in gatsby-config.js with

filter: node => node.internal.type === prismicBlogPost.data.content, source: node => node.html,

or with

filter: node => node.internal.type === prismicBlogPost, source: node => node.data.content.html,

But neither is working. Wonder if I'm overlooking something.

I'm also using gatsby-rehype-prismjs as a plugin to transform html.

[antonborysov]

Hey, @styxlab. Could you maybe advise something on the above or should I look for a different way?

[styxlab]

Hi @antonborysov! Sorry for the delayed response. I am not sure if I can help much as you are using gatsby-transfomer-rehype in a different context, and I don't know much about prismic.

My suggestion is to start with gatsby-theme-try-ghost clone, compile the demo and understand how htmlRehype is populated here. Then, compare with your own examples. From your above post it seems that you do not know the node.internal.type that prismic is attaching, I would inspect that in the GraphQL explorer first.

[antonborysov]

Thanks, @styxlab. I've done the gatsby-theme-try-ghost clone. But the problem is that in ghost there's are only two levels in GraphQL structure - GhostPost as the parent, and html as its direct child. So first is passed to filter, the other - to source.

In gatsby-source-prismic structure, it's prismicBlogPost.data.content.html, so four levels total. And my question is - do I put these intermediate levels into filter: or into source:. As well, what would be the correct way to delimit them so that plugin accepts them as the data I'm passing and merges them correctly into the path to actual html to be transformed. As I've said - tried different ways to do it, but none has worked out.

Would really appreciate your help, or, possibly, examples of the plugin working on starters other than Ghost starter.

[styxlab]

The type is case sensitive and you most likely need to capitalize Prismic and use hyphens for string encapsulation. The following should work:

filter: node => node.internal.type === `PrismicBlogPost`,
source: node => node.data.content.html,

Let me know, if that solves the issue.

[antonborysov]

Thanks, styxlab, it did!