Article CustomType With Content-Relationship To Fill Multiple Slices

Developing with Prismic
, ,
1

Hello Prismic People!
I've recently built a Next.js website with sections (blog slices) dedicated to previewing articles from varying sources, which is accomplished by filling various related fields (ArticleTitle1, ArticleImage1, ArticleTitle2, ArticleImage2, etc) on a page.

I could use some help identifying the correct tools to enable a smoother workflow with Content Relationships and an Article CustomType, as well as some assistance figuring out how to connect and query correctly.

Additional Context
Currently, if we want to add a recent article and preserve the order of items, we must manually replace each field in the Content Editor (e.g. move ArticleImage1 content to the ArticleImage2 slot, move ArticleImage2 content to the ArticleImage3 slot, etc). Additionally, this requires us to manually fill the fields on the Author's page, then on the Category page, then in other places as well; lots of duplicative work.

Desired Workflow/Solution

  • If an author adds relevant "article" fields to their page, and doesn't have time to update the other pages, then there's an obvious content mismatch.
  • If an article is uploaded and the author forgets to correctly shuffle the existing items, we now have items in the wrong order.

I would instead like to:

  • Create an Article CustomType, which a marketer can publish internally with author, date created, category, and a few other fields. This Article custom type doesn't need to appear on the website as it, it just needs to provide instances of data (author, category, title, link to publication, date created, etc).
  • I would then like the relevant blog slice on the category page to populate the most recent 3-6 articles of that category.
  • I would finally like the author's page + blog slice to populate the most recent work by that author as well.

Any help would be greatly appreciated, and I'd be happy to provide additional details + shed some more light on our slice design and page design.

Cheers,
Harry

4

Hello @harry.mardirossian13

Thanks for reaching out to us, and I apologize for the delayed response.

If I understood your question correctly, you need the sorted(on dates) articles(of article custom type) on the front end with the number of results as 5 or 6. If so, you don't need the slices of articles; you need the correct query on the front end with predicates and orderings.

We have a Rest API technical reference article for predicated and orderings:

We have a blog example for reference:

We received a message that you had found the solution. It would be greatly appreciable if you share the solution here and how you ended up.

I am looking forward to hearing back from you.

Best,
Priyanka

5

Hi @Priyanka after reviewing your solution and what worked for me, I've realized my solution is almost there but not quite. I see in the [slug].tsx file you linked, there are some additional params on the query, namely the ordering field on the getAllByType function call. I have two follow-up questions:

  • Can multiple named props be passed to context, and will they each still be treated as distinct objects? (e.g. could I query for all articles and all team members, and pass them as separate objects to context)
  • When calling ordering, can I pass multiple filter conditions to the field param?

In my early broken version, I was making two key mistakes:

  • I conflated Content Relationship with Querying -- I was under the impression that both were required + reliant on each other. In actuality, I see that the query is the only necessary part, along with some classic React props.
  • I was trying to pass my own set of props (e.g. company, portfolio) instead of passing my desired data as props to the context object.

So keeping the above two in mind -- I have a slice I reuse for dynamic content, which I query on page level and sort on Slice level into categories based on the need.

  1. First, I query for 100 articles based on their custom type, "article".
  2. Next, I return the results within the props object.
  3. Finally, when I build the SlizeZone, I pass the articles as context props.
  4. Later, when I render the slice, I provide logic to check which category the slice belongs to, and I grab just the articles for the category I need, sorting by date within the slice itself.

Below is the current code sample, without filtering by date. I'll comment code again once I've achieved the finished code.

import * as prismicH from '@prismicio/helpers'
import { SliceZone } from '@prismicio/react'
import { createClient, linkResolver } from '../prismicio'
import { components } from '../slices/index.js'
import Prismic from 'prismic-javascript'
 
export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData })

  const articleResponse = await client.query(
    Prismic.Predicates.at('document.type', 'article'),
    { pageSize: 100 }
  )

  const articles = articleResponse.results

  const page = await client.getByUID('pageh', params.uid)
  return {
    props: {
      page,
      articles
    }
  }
}
 
export async function getStaticPaths() {
  const client = createClient()
  const pages = await client.getAllByType('pageh')
  return {
    paths: pages.map(page => prismicH.asLink(page, linkResolver)),
    fallback: false
  }
}

const Page = ({ page, articles }) => {
  return (
  <SliceZone 
  slices={page.data.slices} 
  components={components} 
  context={articles}
  />)
}
 
export default Page
6

I have not completely understood your first questions. Are articles and team members Custom types? Or are team members linked as the Content relationship field in articles? Can you elaborate more?

Yes, you can multiple filter conditions to the field params. It's an array. Check example here: https://prismic.io/docs/rest-api-technical-reference#orderings

Thanks,
Priyanka

7

Ah, my apologies for not clarifying that! A team member is a custom type as well. So, say I query first for my articles, then I query for team members in a separate query — can I then pass the two to context, as context={articles, team}?

Or would they need to be bundled into one large props representation, e.g. context={ {articles, team} }

Thank you for answering all my questions so thoroughly, I really appreciate it!

Update: I passed it as a dictionary, e.g. context = { {"articles": articles, "team": team} }