linkResolver not working

Developing with Prismic
1

I'm having difficulty with my linkResolver. I'm trying to build a navigation menu, but when I'm including links to internal documents the URL is returning the default from the linkResolver. I know that the link resolver works generally, as I'm using it in my htmlSerializer and when I link to internal documents in a Rich Text field the URL renders just fine. For some reason it seems specific to this one document type.

Here is my navigation component:

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

import { RichText } from 'prismic-reactjs';

import { Link } from 'components/link/Link';
	
import { linkResolver } from 'gatsby-source-prismic-graphql'

import s from './MainNav.scss';

export const MainNav = () => {
  const menu = useStaticQuery(
    graphql`
    query MainNavQuery {
      prismic {
        allNavigations {
          edges {
            node {
              nav {
                ... on PRISMIC_NavigationNavNav_item {
                  type
                  label
                  primary {
                    label
                    link {
                      _linkType
                      ... on PRISMIC__Document {
                        _meta {
                          id
                          uid
                        }
                      }
                      ... on PRISMIC__ExternalLink {
                        _linkType
                        url
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    `)
  const navContent = menu.prismic.allNavigations.edges[0].node;
  if (!navContent) return null
 
  const navItems = navContent.nav.map((slice) => {
    if (slice.type === 'nav_item') {
      if(slice.primary.link._linkType === 'Link.document') {
        return (
          <li className={s.navigation__item} key={slice.id} key={slice.primary.id}>
            <Link to={linkResolver(slice.primary.link)} className={s.navigation__link}>
              { RichText.asText(slice.primary.label) }
            </Link>
          </li>
        )
      } else if (slice.primary.link._linkType === 'Link.web') {
        return (
          <li className={s.navigation__item} key={slice.primary.id}>
            <a href={slice.primary.link} className={s.navigation__link}>
              { RichText.asText(slice.primary.label) }
            </a>
          </li>
        )
      } else {
        return null
      }
    } 
    return null
  })
 
  return (
    <div className={s.navigation}>
      <ul className={s.navigation__menu}>
        {navItems}
      </ul>
    </div>
  )
}

And here is my link resolver:

export const linkResolver = (doc) => {
  switch (doc.type) {
    case 'landing':
      return `/${doc.uid}/`

    case 'legal':
      return `/legal/${doc.uid}/`

    default:
      return `/`
  }
}

Please let me know if I need to include more code or information. I'm somewhat new to Gatsby and Prismic, so forgive my ignorance.

Thanks!

2

Hey @jesse!

I see that you’re use a Link component that’s coming from your project. When using Gatsby, you should use the Gatsby’s <Link> component when linking to internal pages.

Also, make sure that what it’s being passed to the link resolver is the linked document metadata, this is what makes the Link resolver work.

Give it a try and if you get errors or have any other question let us know

3

@Pau thank you! So, my link component from my project uses Gatsby <Link>, but has additional props that I can pass to it.

Also, can you clarify what you mean when you’re saying “make sure that what it’s being passed to the link resolver is the linked document metadata?” Like I said, I’m somewhat new to both platforms!

5

Hey @jesse!

In order for the linkResolver to work, it has to receive the “metadata” of the linked document. If you go to the linkResolver file you can see it receives a doc as a prop.

So let’s say you’re in the homepage and you have a link to a post. The data provided to the Gatsby Link should be the post metadata. This would be: the type, uid, id the alternateLanguages, etc. You can see what the metadata of a document is by querying it.

<Link to={linkResolver(document.data)} > Click me! </Link>

Learn more about the Link Resolver in Gatsby.

8

@Pau okay! so the problem is in my nav component, not the link resolver?

9

@jesse

Yes, It could be a possibility, if you’re still having this error and if you have some logs that you can share with me, you can send me a private message and we can try and figure out whats happening

10

In this case, a solution would be to change a couple of things:

  1. If you want to use static queries inside components, use StaticQuery instead of useStaticQuery. This last one is not yet supported for this specific plugin.

    Or avoid using a static query and move the query away from the component and add it into the templates (this will help in case you need the navigation to be dynamic)

  2. Make sure that whenever you’re calling a link to a document you should always query its metadata to be able to pass it into the LinkResolver.

A good example of a navigation bar with links can be found in this sample project: Multi language site with Gatsby