Query content relationship inside slice in repeatable zone

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

Thank you.

1 Like

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.

Hey, can someone tell me how to fetch a Link (Document) if I have an array of Links?

In my example, I have an array of categories in my data for the article.
(So the Article Object has in his database a repeating field named categories, in this repeating object, there is a link field to connect it to a category)

I would like to fetch for every article the category documents.
Also filtering doesn't work.
Thanks

const response = await client.get({
        filters: [
          prismic.filter.at("document.type", "neuigkeiten_post"),
          prismic.filter.at("my.neuigkeiten_post.categories.category.name", params.category) // Doesn't work
        ],

        fetchLinks: ['results.categories.category.name'],// This is not working
        pageSize: 10, // Hardcoded page size for now
        // Include sorting and pagination parameters if supported by Prismic
      });

Hi Carlo,

I think your fetchLinks should work as just ['category.name']. Give that a try and let me know if it works :slight_smile:

Sam

Hey Sam,
thanks for your reply...
No if i fetchLinks with ['category.name'] i just get an array of these objects back:

{
    "title": "Das ist der Titel des Artikels 2",
    "excerpt": "das ist der excerpt",
    "main_image": {
        "dimensions": {
            "width": 7173,
            "height": 10041
        },
        "alt": "red strawberry fruit with white background",
        "copyright": null,
        "url": "https://images.unsplash.com/photo-1601004890684-d8cbf643f5f2?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwzfHxmcnVpdHxlbnwwfHx8fDE3MDI4MzA4OTl8MA&ixlib=rb-4.0.3&q=85?auto=compress,format",
        "id": "xnRg3xDcNnE",
        "edit": {
            "x": 0,
            "y": 0,
            "zoom": 1,
            "background": "transparent"
        }
    },
    "article": [
        {
            "type": "paragraph",
            "text": "das ist der Artikle",
            "spans": [],
            "direction": "ltr"
        }
    ],
    "downloads": [],
    "slices": [],
    "meta_description": "Das ist die Meta beschreibung aus Prismic",
    "meta_image": {
        "dimensions": {
            "width": 2400,
            "height": 1260
        },
        "alt": "ripe pineapple fruit",
        "copyright": null,
        "url": "https://images.unsplash.com/photo-1550258987-190a2d41a8ba?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyfHxmcnVpdHxlbnwwfHx8fDE3MDI4MzA4OTl8MA&ixlib=rb-4.0.3&q=85&rect=0%2C1568%2C2749%2C1443&w=2400&h=1260?auto=compress,format",
        "id": "nAOZCYcLND8",
        "edit": {
            "x": 0,
            "y": 1568,
            "zoom": 1,
            "background": "transparent"
        }
    },
    "meta_title": "der Meta title des Artikels",
    "last_updated": "2023-12-01",
    "og_image": {
        "dimensions": {
            "width": 1200,
            "height": 630
        },
        "alt": "yellow round fruit in close up photography",
        "copyright": null,
        "url": "https://images.unsplash.com/photo-1591287083773-9a52ba8184a4?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyMXx8ZnJ1aXR8ZW58MHx8fHwxNzAyODMwODk5fDA&ixlib=rb-4.0.3&q=85&rect=0%2C2584%2C5304%2C2785&w=1200&h=630?auto=compress,format",
        "id": "mrFdBdTlElk",
        "edit": {
            "x": 0,
            "y": 2584,
            "zoom": 1,
            "background": "transparent"
        },
        "Small": {
            "dimensions": {
                "width": 600,
                "height": 315
            },
            "alt": "yellow round fruit in close up photography",
            "copyright": null,
            "url": "https://images.unsplash.com/photo-1591287083773-9a52ba8184a4?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyMXx8ZnJ1aXR8ZW58MHx8fHwxNzAyODMwODk5fDA&ixlib=rb-4.0.3&q=85&rect=0%2C2584%2C5304%2C2785&w=600&h=315?auto=compress,format",
            "id": "mrFdBdTlElk",
            "edit": {
                "x": 0,
                "y": 2584,
                "zoom": 1,
                "background": "transparent"
            }
        }
    },
    "og_title": "OG title aus prismic",
    "og_description": "og description aus prismic",
    "author_name": "Tom Maier",
    "author_url": {
        "link_type": "Web",
        "url": "https://vonreyher.com",
        "target": ""
    },
    "keywords": "test keywords",
    "categories": [
        {
            "category": {
                "id": "ZYBsyxAAAJ6PITQS",
                "type": "broken_type",
                "tags": [],
                "lang": null,
                "slug": "-",
                "first_publication_date": null,
                "last_publication_date": null,
                "link_type": "Document",
                "isBroken": true
            }
        },
        {
            "category": {
                "id": "ZYBsyxAAAJ6PITQS",
                "type": "broken_type",
                "tags": [],
                "lang": null,
                "slug": "-",
                "first_publication_date": null,
                "last_publication_date": null,
                "link_type": "Document",
                "isBroken": true
            }
        }
    ]
}

Hey a short update - it is working now - I did't change anything - maybe the reboot of my operating systhem made the change thanks for your help

Carlo

1 Like