I'm trying to render data from a linked document in my Next.js project. From what I understand, I need to use FetchLinks but am unable to work out how to render the queried data in my template.
My Prismic data is below, where I am trying to pull in data from a document type called Person as the documents Author:
I think I've set up the function to reference the person data using fetchLinks but am unable to work out how to display the data in my template e.g. the person name
import React from 'react'
import DefaultLayout from 'layouts'
import { Header, SliceZone } from 'components'
import { queryRepeatableDocuments } from 'utils/queries'
import { RichText } from 'prismic-reactjs'
import { Client } from 'utils/prismicHelpers'
const Article = ({ doc, menu }) => {
if (doc && doc.data) {
return (
<DefaultLayout>
<div className="page">
<Header menu={menu} />
<div className="container my-12">
{RichText.render(doc.data.title)}
{RichText.render(doc.data.headline)}
</div>
<div className="container grid md:grid-cols-3">
<div>{RichText.render(doc.data.author.name)}</div>
<div className="md:col-span-2">{RichText.render(doc.data.lead_paragraph)}</div>
</div>
<SliceZone sliceZone={doc.data.body} />
</div>
</DefaultLayout>
)
}
// Call the standard error page if the document was not found
return null;
}
export async function getStaticProps({ params, preview = null, previewData = {} }) {
const { ref } = previewData
const client = Client()
const doc = await client.getByUID('opinion', params.uid, {'fetchLinks': ['person.uid', 'person.name']}, ref ? { ref, } : null) || {}
const menu = await client.getSingle('menu', ref ? { ref } : null) || {}
return {
props: {
preview,
menu,
doc
}
}
};
export async function getStaticPaths() {
const documents = await queryRepeatableDocuments((doc) => doc.type === 'opinion')
return {
paths: documents.map(doc => `/opinion/${doc.uid}`),
fallback: true,
}
}
export default Article
Any help would be greatly appreciated.
