LinkResolver uses current path to build link

[kevindamstra]

So, I just noticed this strange behavior, I must be missing something. I've created a local bike rental website. When I'm on the homepage the navigation works perfectly, but let's say I visit the services page and I would like to go to the bike repair page, the bike repair page is appended tot the services page.

Expected behavior: "example.com/bike-repair"

Current behavior: "example.com/services/bike-repair"

It looks like the LinkResolver somehow appends the current page to the url, this is unexpected. Does this look familiar to anyone?

./utils/linkResolver.js

const linkResolver = (doc) => {
    if (doc.type === 'page') {
        return `../${doc.uid}`
    }
        return '/'
}

module.exports = linkResolver

./components/NavigationServices.js

const Services = () => {

  return (

    <StaticQuery
      query={`${servicesQuery}`}
      render={(data) => {

        const prismicContent = data.allPrismicNavigationServices.edges[0]
        if (!prismicContent) return null
        const doc = prismicContent.node 

        return(
          <ServicesLinks>
            <ServicesListHeading>
              Services 
            </ServicesListHeading>
            <ServicesList as="ul">
              {doc.data.services_navigation.map((navItem, index) => {
                  return (
                    <li className="nav-item" key={`link-${index}`}>
                      <NavLink to={navItem.link.uid}>
                        {navItem.link_label[0].text}
                      </NavLink>
                    </li>
                  )
                })}
            </ServicesList>
          </ServicesLinks>
        )
      }}
    />
  )
}

const servicesQuery = graphql`
  query servicesQuery {
    allPrismicNavigationServices {
      edges {
        node {
          data {
            services_navigation {
              link {
                type
                uid
              }
              link_label {
                text
              }
            }
          }
        }
      }
    }
  }
`

export default Services

With best regards,

Kevin

[Paulina]

Hey Kevin, what I imagine is that, the issue is not coming from the link resolver, but rather from the way you're generating your dynamic pages.

Which plugin are you using to do them? because, e.g., if you're using gatsby-node to generate them, this is where you create the URLs for each page using the data from the queries.

I'd like to know about this part of your project to better understand the use case

[kevindamstra]

Dear Paulina,

Thank you for your response, I'm following the tutorial specified here; https://prismic.io/docs/technologies/gatsby-tutorial-4-adding-repeatable-pages

The thing is, the tutorial still uses the gatsby-srouce-prismic-graphql but shows a notice above which states we should no longer use this plugin. From now on you should use the "gatsby-source-prismic" plugin.

Edit; I've included my gatsby-node.js down below;

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // Query all Pages with their IDs and template data.
  const pages = await graphql(`
    {
      allPrismicPage {
        nodes {
          id
          uid
        }
      }
    }
  `)

  const pageTemplates = {
    Page: path.resolve(__dirname, 'src/templates/page.js'),
  }

  // Create pages for each Page in Prismic using the selected template.
  pages.data.allPrismicPage.nodes.forEach((node) => {
    createPage({
      path: `/${node.uid}`,
      component: pageTemplates.Page,
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.uid,
      },
    })
  })
}

As far as I can see the path generated for each page is correct.

When I have a look at the Link used in the navigation

<Link className="nav-link" to={navItem.link.uid}>
  {navItem.link_label.text}
</Link>

This appends the {navitem.link.uid} - " /bike-repair" to the current url, like it's a child page from the current page. Instead it should behave like regular page url.

[kevindamstra]

This actually does the trick but it refers to the folder one level up even though that's not the case, it also returns "null" for the homepage.

<Link className="nav-link" to={`/${navItem.link.uid}`}>
  {navItem.link_label.text}
</Link>

I guess the Link component isn't properly using the linkResolver, it does not return "/{navItem.link.uid" it just returns the plain value for "{navItem.link.uid}" therefore appending the value to the url structure.

If the linkResolver points to the correct path with the slash, I should be alright...

[kevindamstra]

So indeed it was the linkResolver, I've updated the Nav component as follows;

<Nav>
  <ul class="nav-list">
    {doc.data.top_navigation.map((navItem, index) => {
      const linkTo = linkResolver(navItem.link)
      return (
        <li className="nav-item" key={`link-${index}`}>
          <Link 
            className="nav-link" 
            to={linkTo} 
          >
            {navItem.link_label.text}
          </Link>
        </li>
      )
    })}
  </ul>
</Nav>

I've imported the linkresolver directly

import linkResolver from '../utils/linkResolver'

Now when the document is of type page an url is build by the linkResolver instead of being used directly in the html document.

[Paulina]

Hey again, glad to see you managed to sort this out. i was going to tell you that you needed to pass the complete link to the. linkResolver to that it gets the full document metadata. But you figure it out yourself.

So is it working properly now?

And about the documentation for the gatsby-source-prismic-graphql plugin. We've talked about this a lot in the past, we have a dedicated article explaining why we're moving away from it and we can only apologise for all the complications that this causes to every user that has selected this framework to work with Prismic. We're currently working on changing the documentation to focus on the gatsby-source-prismic plugin alone. This plugin works differently, but we'll be able to have a little more control over the maintenance of it.

If you encounter any issues about this or anything else, be sure to contact us