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!