Custom Tag System Update - Content Relationship Filter

Developing with Prismic
1

I have gone over the FAQ created to help with custom tagging, as the native Tag system is not ready for "prime time" yet. I am stuck on the following step:

// You will also be able to query any documents linked to a certain tag in your system. 
To do this, you must query by the Content Relationship field you set up.

I have a custom tag called "conventional." I'd like to get all posts with the content relationship of "conventional." The method of doing this in Next is escaping me. I was able to do this years ago when I built sites using Gatsby thanks to query variables. I thought I might be able to use "filter" which used to be "predicates," but that doesn't seem to be the ticket either. Can anyone point me in the right direction with this system?

2

I believe I have worked this out. I am posting this here in case it may help some other fine coder someday so that they may avoid the struggle bus for a while longer.

Using the FAQ as a guide, I have a custom type called Tag. It has a Title field (rich text H1 only) and a UID field.

My Post (page type) has a Group field called Custom Tags with a Content Relationship field inside called Custom Tag (restricted to the aforementioned Tag type).

In my app directory:

- blog
- - tag
- - - - [uid]
- - - - - - page.tsx

I create a page for every Custom Tag. Below is how I was able to filter to get only the posts that have this tag.

export default async function Page({
  params,
  searchParams,
}: {
  params: Params
  searchParams: SearchParams
}) {
  const client = createClient()
const pageNumber = Number(searchParams['page']) || 1
const page = await client.getByUID('tag', params.uid).catch(() => notFound())
const posts = await client.getByType('post', {
    orderings: {
      field: 'document.first_publication_date',
      direction: 'desc',
    },
    graphQuery: `
    {
      post {
        custom_tags {
          custom_tag
        }
        date_published
        excerpt
        meta_image
        title
        slices
      }
    }
    `,
    filters: [prismic.filter.at('my.post.custom_tags.custom_tag', page.id)],
    page: pageNumber,
    pageSize: 5,
  })
return (
    <>
      <Section width="md">
        <Heading
          as="h1"
          size="4xl"
          className="text-color-primary lg:text-center"
        >
          <HiTag className="h-8 w-8 inline" /> Posts tagged as{' '}
          {prismic.asText(page.data.title)}
        </Heading>
        {posts && posts.results.length > 0 && (
          <ul className="px-4 lg:px-0">
            {posts.results.map(post => {
              return (
                <BlogCard
                  key={post.id}
                  post={post}
                  className="max-w-xl mx-auto"
                />
              )
            })}
          </ul>
        )}
        {(posts?.next_page !== null || posts?.prev_page !== null) && (
          <Pagination
            hasNextPage={posts?.next_page !== null}
            hasPrevPage={posts?.prev_page !== null}
            totalPages={Number(posts?.total_pages)}
          />
        )}
      </Section>
    </>
  )
}
1 Like
4

Hey Neil!

I have to apologize! I assigned myself this thread a month ago, and then lost track of it :sweat_smile:

Anyway, yes — you're 100% correct. This is the essential line:

filters: [prismic.filter.at('my.post.custom_tags.custom_tag', page.id)],

You need to fetch the ID of the document that you link to, and then filter by that ID, as you deduced. In the future, we may simplify this, but — for now — you've got it correct.

Thanks so much for posting your question and your solution! :fire:

Sam

1 Like