Get content relationship links from a slice

Developing with Prismic
, ,
1

I am creating the following structure content

Page
--Slice
----Content Relationship Link
------Content Relationship Link

When I query the page using fetchLinks, I can't get to the content relationship links when trying to code the slice up. I believe that is a limitation of fetchLinks only being able to do this at the top level, and not from a slice.

However I am really struggling to achieve this with graphQuery too. Is the below possible?

{
      servicepage {
        title
        slices {
          ...on description_quote {
            variation {
              ...on default {
                primary {
                  title
                  description
                  quote
                  ...on quote {
                    author
                    ...on author {
                      nname
                    }
                  }
                  
                }
              }
            }
          }
        }
      }
    }

I also tried looping through the slices to see if I could make another API call to fetch the 1st content link and then the 2nd, but I couldn't see a way to call this. The API only seems to have querying at the top level.

3

Anyone have any suggestions on this? Must be a pretty common use case.

4

Hi Pali,

This is possible, but your query must be correctly structured.

I checked out your API browser and I noticed that your query doesn't match your actual content structure, for example there is no field called title.

Then in your query for the content relationship link, you call the link as if it has the API ID quote,

but there is no link field called quote:

{
"variation": "default",
"version": "initial",
"items": [ ],
-"primary": {
"title": "Simple company formation in Dubai",
+"description": [ … ],
"quote_author_name": "Pali",
"quote_author_job_title": "CEO, Strive Consultants",
+"quote_author_avatar": { … },
+"quote_description": [ … ]
},
"id": "description_quote$a3a33090-afbf-4015-a7d9-62bcfcc92e7a",
"slice_type": "description_quote",
"slice_label": null
},

You need to have a content relationship field existing in the Slice connected to the custom type you want to get info from, and your query must match exactly your published structure, or it won't work.

Let me know if you have any more questions about this.

Thanks.

5

Thanks @Phil , I had remove the content relationship field hence the confusion. This is the first I've seen of the API browser. I added a new "Quote Author" relationship to a slice and this the output I managed to get when querying a particular page.

So I can see the quote_author, (which is where I believe I got to before). However what I cannot see is the actual properties of the Author custom type, which should be properties such as name, job title, avatar etc.

Is there a way to do this via fetchLinks or graphQuery? It would be great to get a reference to a definitive NextJS example showing how to do this as this seems to be quite vague in the docs.

Screenshot 2023-10-23 at 17.46.54
Screenshot 2023-10-23 at 17.46.541632×1142 125 KB

6

Hi @Phil , managed to make some progress using this query

graphQuery: `{
      servicepage {
        slices {
          ...on description_quote {
            variation {
              ...on default {
                primary {
                  title
                  description
                  quote_author {
                    ...on author {
                      ...authorFields
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

The only issue I am getting now is that the query doesn't seem to return a fully-typed object based on my custom type. e.g. slice.primary.quote_author. should be of type "Author" but what is actually returned is ContentRelationshipField<"author">

Is there a correct way to force it so that it is of type AuthorDocument ?

Thanks

7

Cool, I'm glad you were able to figure this out.

As for the types, I need to quickly look into it, but I think there's a way. I'll get back to you as soon as possible.

8

This thread should help you with the typescript side of things:

9

Thanks @Phil - looks more painful than I would have liked :upside_down_face:

1 Like
10

Yeah, unfortunately, we hope to make this easier in the future, but I have not ETA on when that might be.

12

@Phil I'm trying a simpler example using fetchLinks for now but hitting similar problems.

const communityPosts = await client.getByType('blog_post', {
    fetchLinks: ["author.first_name", "author.last_name", "author.avatar", "author.job_title"],
    orderings: [{ field: 'my.blog_post.published_date', direction: 'desc' }],
  })

This returns a type of BlogPostDocument, but again I cannot seem to get a typed AuthorDocument from this. Surely there must be a cleaner way to get this in typescript? I really do not want to have to resort to Any types.

13

Unfortunately, the solution I linked is the only way to do it in typescript for now :grimacing: I'm sorry

Did you try these links as well?

Topic:
:point_right: Types for content relationship in a Slice

And also in the documentation:
:point_right: Use TypeScript with Next.js