How to query data for multiple documents using Content Relationship field and display in component

Developing with Prismic
1

I have used the group and content relationship fields to create an array of documents for a specific type. The plan is to create a "featured work" section on a page.

Currently the data retuned gives me an array with access to the following for each "work" document types:

first_publication_date : "2023-02-09T15:09:17+0000"
id "Y-UMlxEAAB8ACn4P"
isBroken : false
lang: "en-gb"
last_publication_date: "2023-02-09T15:09:17+0000"
link_type: "Document"
slug: "test-project"
tags: []
type: "work"
uid: "this-is-a-test"

The data returns the UID which I know I can use to get the data on a page, but as this is data being fetched from a component level and there would be multiple UIDs, I am not sure of the best approach to get access to all data items like titles, images etc for each selected work documents to then loop over and pass into a card component to display.

For reference the build consists of NextJS, React/TypeScript.

Any pointers anyone can give for the best approach to achieve this would be appreciated.

3

Hey @luke1, To pull in content from another document, you must fetch that content in your API query using the graphQuery or fetchLinks option.

Check out our documentation:

We can help you build your queries if you need help.

4

@luke1, we recently solved his problem for our use case with the graphQuery option. FetchLinks does not return all of the nested fields in our custom types.

This query using fetchLinks did not return all of the fields:

const page = await client.getByUID('mission_vision', 
  'about-meetings', 
  {
    fetchLinks: ['staff_and_board.person', 'board.person', 'meeting_tabs.upcoming_meeting_date, meeting_tabs.previous_meeting_date, meeting_tabs.upcoming_meeting_agenda_packet', 'meeting_tabs.previous_meeting_documents', 'meeting_tabs.upcoming_meeting_agenda_content'],
  },
)

Buy using graphQuery, we can fetch all of the fields in the linked documents:

const page = await client.getByUID('mission_vision', 'about-meetings',
      {
        graphQuery: `{
          mission_vision {
          section {
            ...sectionFields
              content_relationship {
                ...on board {
                  ...boardFields
                }
                ...on staff_and_board {
                  ...staff_and_boardFields
                }
                ...on meeting_tabs {
                  ...meeting_tabsFields
                }
              }
            }
          }
        }`
      }
      );
1 Like
6

Thank you @Pau @jgunderson for your suggestions. I actually got this working with the following:

const page = await client.getSingle('homepage');
const getFeaturedWork = page.data.featured_work_list.map((work:DocumentSelect) => (work.select.id));
const featuredWork = await client.getAllByIDs(getFeaturedWork);

getFeaturedWork returns an array of IDs set by the user in the CMS using a mixture of group/content relationship fields. The array of IDs then pulls all relevant data from the individual documents with getAllByIDs.

2 Likes