Fetch group of content relationships

Developing with Prismic
1

Use case:
I have a group of development projects that I want to showcase, and under each one I want to have logos of the languages/technologies used in them

Structure:

project: {
 technologies: [
    // content relationship to "technology" type
 ]
}

technology: {
   name,
   string
}

Sample data:


// projects

[
  {
    name: "My website",
    technologies: [
      "ruby_on_rails",
      "vue"
    ]
  },
  // .....
]

// technologies
[
  {
    id: "ruby_on_rails"
    name: "Ruby on Rails",
    logo: "/rails_logo.jpg"
  },
  {
    id: "vue",
    name: "Vue",
    logo: "/vue_logo.jpg"
  }
  //....
]

But when I query the API...

            let prismicResponse = await $prismic.api.query(
              $prismic.predicates.at('document.type', 'project'),
              {lang: '*', fetchLinks: 'technologies'}
            )

it seems that only the reference to the document is returned, and not the document itself

        technologies: [
          {
            technology: {
              id: 'X8punhAAACMAKTOU',
              type: 'technology',
              tags: [],
              lang: 'en-gb',
              slug: 'vue',
              first_publication_date: '2022-11-09T14:10:08+0000',
              last_publication_date: '2022-11-09T14:10:08+0000',
              link_type: 'Document',
              isBroken: false
            }
          },

How should I change my structure and/or query to achieve the desired outcome?

3

Hey Chris,

I think what you're doing with your predicates.at will only return the data you've set on the project document.

are you able to share your model for technologies or if possible PM me your endpoint?

You could try something like the following:

// Get document of page you want your repeatable projects on?
const document = await $prismic.api.getByUID('project', route.param.uid)
    const idArray = []
// For each relation field item you’ve set, get the ID and add to array
    document.data.technologies.forEach((item) => idArray.push(item.technology.id))
    console.log(‘array of documents ids to fetch’, idArray)
// Get all documents from the array of IDs
    const result = await $prismic.api.query(
      $prismic.predicates.in('document.id', idArray)
    )

Note: This may result in a huge response if the document for each technology has a lot of fields as you’re getting all the document data for each technology

4

Hi Jake,

Since my original post I have done an implementation similar to what you suggested as a workaround, but like you say it's probably not the most efficient way of doing things.

I have PM'd you my repository url. So I just need the logo url and name of each technology to be returned in the original query.

5

Hey Chris,

I've had a look and don't think there's a better way of fetching these data fields than the above (that I know of) unless you used graphQL, which I'm not overly familiar with.

6

No worries, thanks for investigating for me. I'm not too hot on GraphQL myself but will have a bit of a dive :+1: