Gatsby Rich Text link href is empty

I've been racking my brain on this. In Prismic I have Rich Text content with links. I've linked them directly to content but the graphql response comes back with href=""

Here's my setup:

gatsby-config.js

{
      resolve: "gatsby-source-prismic",
      options: {
        repositoryName: process.env.PRISMIC_REPO,
        accessToken: process.env.PRISMIC_TOKEN,
        schemas: {
          page: require("./src/schemas/page.json"),
          ...
        },
        linkResolver: linkResolver,
        shouldDownloadImage: () => {
          return false
        },
      },
    },

linkResolver.js

module.exports = ({ node, key, value }) => doc => {
  console.log("doc", doc)
  if (doc.type === "page") {
    if (doc.uid === "home") {
      return "/"
    } else {
      return `/${doc.uid}`
    }
  }
  return `/${doc.uid}`
}

graphql query:

    items {
      title {
        text
      }
      content {
        html
      }
    }

render

<div
  className="font-light prose prose-sm"
  dangerouslySetInnerHTML={{ __html: feature.content.html }}
/>

Hey, thanks for reaching out. This is very strange if the response is correct. Is this field inside a Slice or is it a top level field?

Because If it's a top level field, unfortunately the options raw and html won't be available. Instead you will get a 'spans' object that you can use to detect where a link goes by giving you the start and end of the array, like so:

{
  "spans":[
    {
      "type":"hyperlink",
      "start":7,
      "end":11,
      "data":{
        "link_type":"Web",
        "url":"https://sample.com"
      }
    }
  ]
}

If this is not the case, I can do a check in your repo. You just need to send me the URL of your repository and the query you are using to get that value

Thanks! This is in a slice!

The repo is oxfordpennant and it's Page > Features Slice

I appreciate the help. I hope it's not something stupid I did.

Hello, I'm testing your endpoint, and I and indeed seeing something strange in the href response of the linked documents. But before making any further assumptions, I'd like to make a few other tests.

I forgot to ask you about your gatsby-node file code. Could you also share this with me? Either here or in a private dm, as you prefer.

How are you handling your dynamic routes? This step is crucial for route generation. Usually, the homepage is a static page inside the /pages directory, and all dynamic routes are inside /templates

Update: The linkResolver that is passed to the gatsby-config.js needs to be a function.

So instead of doing this:

linkResolver: linkResolver,

Do this:

linkResolver: () => (doc) => linkResolver(doc),

Also, make sure is correctly exported & imported.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.