Query content relationship inside slice in repeatable zone

Hello there,
Any ideas how to query content relationship inside slice in repeatable zone?

Thank you.

Hey @rizqinizamil,

Welcome to the Prismic community, and thanks for posting this question! :slightly_smiling_face: :handshake:

To fetch content relationships, you can use the fetchLinks option:

To use fetchLinks, add an options object to your query, with a fetchLinks key. For the fetchLinks key, set the value to [custom-type-of-linked-document].[field-on-linked-document].

When you include the fetchLinks option, the API will fetch the field on every linked custom type in your document, including in the repeatable zone of the slice. So, if you have a FeaturedPosts slice, which displays a curated list of posts. In the repeatable zone for the slice, you have a content relationship that links to a post custom type. In Next.js, you need the title for every post in that slice.

For instance, if you are building a "homepage" document, your query might look like this:

const document = await client.getSingle('homepage',
    {'fetchLinks': 'author.name'}
)

The API should return your document, and in the FeaturedPosts slice there will be data keys with each post title.

Please let me know if I correctly understood your question, and if this answer works for you! If not, let me know and we'll keep working on it together :slight_smile:

Sam

That is the data looks like, lesson item is the one that I want to connect with another content. My current query is:

const { data } = await client.getByUID("course", uid,
    {'fetchLinks': 'lesson_detail.uid'}
  )

Is it right? But I don't find any changes on console.log

Hey @rizqinizamil,

It looks like this is almost working. With fetchLinks, you specify which fields you want to retrieve from the linked document. Right now, you are only requesting the uid, which appears at data.body[4].items[0].lesson_item.data.uid. Now, you can add all of the other fields that you need in an array. That would look something like this:

const { data } = await client.getByUID("course", uid,
  {'fetchLinks': ['lesson_detail.uid', 'lesson_detail.title', 'lesson_detail.description']}
)

Let me know if that works for you.

Sam

I'm sorry I'm really suck at Javascript, it seems like I don't get the fetch items. Should I connect to my lesson_detail document too to get the lesson detail data? Like this?

export async function getStaticProps({ params }) {
  const { uid } = params
  const { data } = await client.getByUID("course", uid,
    {'fetchLinks': ['lesson_detail.uid', 'lesson_detail.title', 'lesson_detail.description']}
  )

  const lesson = await client.query(
    Prismic.Predicates.in("my.lesson_detail.uid", ["introduction-and-getting-started", "macro-and-microeconomics-101", "the-fundamental-of-micro-and-macroeconomics"])
  )
  return {
    props: { 
      data,
      lesson
    },
  }
}

So how can i retrieve lesson_detail.uids for the parameter?

Hey @rizqinizamil,

Thanks for posting your code snippet! It definitely doesn't look like you suck at javascript — this all looks perfect. The only issue is how you're using fetchLinks. You're passing the field type. You need the field API ID:

{'fetchLinks': ['lesson_detail.uid', 'lesson_detail.title', 'lesson_detail.description']}

Should be:

{'fetchLinks': ['lesson_detail.uid', 'lesson_detail.lesson_title', 'lesson_detail.lesson_description']}

(I took the liberty of looking at your repo to get the IDs.)

Try that, and see if it fixes your issue. And let me know if you have any other question :slight_smile:

Sam

1 Like

Wow, awesome. It's working! Thank you @samlittlefair!

1 Like

Glad to hear it, @rizqinizamil :slight_smile: I'm always here if you have any other questions.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.