Can't get fetchLinks to work in next js

[lfeddern (Lukas Feddern)]

Sorry new to prismic so apologies if a very obvious question!!

I am trying to set up taxonomies for my project.

I have a couple of custom types called "blogAuthor" & "blogCategory"

I am trying to create a all blogs page that has cards that show the authors and the categories.

In order to do this I am trying to fetch all the blogs & use the fetchLinks param to get all the information associated with the linked custom type.

I am trying to test this out by just getting all the authors names using the format: "[linked-document-type].[field-on-linked-doc]"

 const blogPosts = await client.getAllByType("blogpost", {
    fetchLinks: "blogauthor.authorname",
  });

However, when I console log out the result I see no changes and get:

[ {
    id: 'ZiIz5hAAAMxFRPCc',
    uid: 'test2',
    url: '/blog/test2',
    type: 'blogpost',
    href: 'https://novabook.cdn.prismic.io/api/v2/documents/search?ref=ZiVCKxAAACYAUnEr&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22ZiIz5hAAAMxFRPCc%22%29+%5D%5D',
    tags: [],
    first_publication_date: '2024-04-19T09:06:04+0000',
    last_publication_date: '2024-04-21T09:34:09+0000',
    slugs: [],
    linked_documents: [],
    lang: 'en-gb',
    alternate_languages: [],
    data: {
      categories: [Array],
      authors: [Array],
      blogtitle: 'Blog with two categories and two authors and a slightly longer title',
      blogimage: [Object],
      slices: [Array],
      meta_description: null,
      meta_image: {},
      meta_title: null
    }
  },
  {
    id: 'ZiTyLhAAACGLUQuN',
    uid: 'fourth-example',
    url: '/blog/fourth-example',
    type: 'blogpost',
    href: 'https://novabook.cdn.prismic.io/api/v2/documents/search?ref=ZiVCKxAAACYAUnEr&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22ZiTyLhAAACGLUQuN%22%29+%5D%5D',
    tags: [],
    first_publication_date: '2024-04-21T11:02:12+0000',
    last_publication_date: '2024-04-21T11:09:58+0000',
    slugs: [],
    linked_documents: [],
    lang: 'en-gb',
    alternate_languages: [],
    data: {
      categories: [Array],
      authors: [Array],
      blogtitle: 'Post about some tree',
      blogimage: [Object],
      slices: [Array],
      meta_description: null,
      meta_image: {},
      meta_title: null
    }
  },
  {
    id: 'ZiI0WRAAABhGRPKv',
    uid: 'third-test',
    url: '/blog/third-test',
    type: 'blogpost',
    href: 'https://novabook.cdn.prismic.io/api/v2/documents/search?ref=ZiVCKxAAACYAUnEr&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22ZiI0WRAAABhGRPKv%22%29+%5D%5D',
    tags: [],
    first_publication_date: '2024-04-19T09:07:39+0000',
    last_publication_date: '2024-04-21T09:34:30+0000',
    slugs: [],
    linked_documents: [],
    lang: 'en-gb',
    alternate_languages: [],
    data: {
      categories: [Array],
      authors: [Array],
      blogtitle: 'Another test blog about fundraising for your start up',
      blogimage: [Object],
      slices: [Array],
      meta_description: null,
      meta_image: {},
      meta_title: null
    }
  }
]

What am I doing wrong??

Also, why are these custom docs not appearing in the linked_documents array for each of the blog posts they are added to?

[nf_mastroianni (Neil)]

Hi @lfeddern ,

Welcome to Prismic-ville

I will attempt to answer your question.

From your screenshots and code, it appears as though you have some custom types that are related to blog information like category and author. You must also have a page type called blogpost. I can't see it anywhere, but I would imagine you have content relationship fields in the blogpost type so that content editors can select an author and a category. If that's not the case, that would be why your fetchLinks isn't working.

Double check that you've used those content relationship fields and let me know. Perhaps a screenshot of your blogpost type may help as well.

-Neil

[lfeddern (Lukas Feddern)]

Hi Neil,

Thanks so much for getting back to me - I really appreciate it!!

So yes, I have those two custom types. I have attached them to my 'blogpost" page type & I have attached them as so:

Can't seem to figure out why it won't work... any help much appreciated!!

Lukas

[nf_mastroianni (Neil)]

Lukas,

I see in your console.log data.categories and data.authors are arrays (as would be expected from a group field). Can you show the output of a console.log for those arrays?

On a related note, I found a thread in this forum that makes the point that graphQuery is the most reliable way to get data from content relationships from within a group field such as your categories and authors.

I prefer to avoid the getAll* types because I want to avoid fetching too much. I've found that having too many items on a page really slows the experience down.

If this helps, here's a graphQuery I used on a project where posts have a custom tagging system (not the native Prismic tags). Pay no mind to the filters portion:

const posts = await client.getByType('post', {
    orderings: {
      field: 'document.first_publication_date',
      direction: 'desc',
    },
    graphQuery: `
    {
      post {
        custom_tags {
          custom_tag
        }
        date_published
        excerpt
        meta_image
        title
        slices
      }
    }
    `,
    filters: [prismic.filter.at('my.post.custom_tags.custom_tag', page.id)],
    page: pageNumber,
    pageSize: 5,
  })

[lfeddern (Lukas Feddern)]

Hi Neil,

Thanks again for getting back to me!

I will take a look a the graphQuery - thanks for the example very helpful.

I have console.log out the arrays from one of the "blog-post" the data.categories:

[
  {
    category: {
      id: 'ZiF5FRAAAGcyQaq1',
      type: 'blogcategory',
      tags: [],
      lang: 'en-gb',
      slug: '-',
      first_publication_date: '2024-04-18T19:48:41+0000',
      last_publication_date: '2024-04-19T09:10:42+0000',
      uid: 'payroll--pensions',
      link_type: 'Document',
      isBroken: false
    }
  }
]
[
  {
    category: {
      id: 'ZiF5FRAAAGcyQaq1',
      type: 'blogcategory',
      tags: [],
      lang: 'en-gb',
      slug: '-',
      first_publication_date: '2024-04-18T19:48:41+0000',
      last_publication_date: '2024-04-19T09:10:42+0000',
      uid: 'payroll--pensions',
      link_type: 'Document',
      isBroken: false
    }
  }
]

& data.authors:

[
  {
    author: {
      id: 'ZiF6HRAAAHYyQbFl',
      type: 'blogauthor',
      tags: [],
      lang: 'en-gb',
      slug: '-',
      first_publication_date: '2024-04-18T19:53:05+0000',
      last_publication_date: '2024-04-19T10:04:16+0000',
      uid: 'ruben-portz',
      link_type: 'Document',
      isBroken: false
    }
  }
]
[
  {
    author: {
      id: 'ZiF6HRAAAHYyQbFl',
      type: 'blogauthor',
      tags: [],
      lang: 'en-gb',
      slug: '-',
      first_publication_date: '2024-04-18T19:53:05+0000',
      last_publication_date: '2024-04-19T10:04:16+0000',
      uid: 'ruben-portz',
      link_type: 'Document',
      isBroken: false
    }
  }
]

Is this as expected?

Thanks!

[nf_mastroianni (Neil)]

If the fetchLinks was working, each of your categories and authors should have their own data property with the items you specify. Try the graphQuery. I have a feeling that’ll do the trick.