👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Filtering results for reference selectors in arrays

By Daniel Favand

Simplify finding the right document to select when you have multiple types

1: Show two types in results

{
  name: 'content',
  type: 'array',
  // when adding an item to this list, you'll be given only one option,
  // but the search results will include both types
  of: [
    // add reference to article or product - reference picker will show both products and articles in the search results
    {
      type: 'reference',
      name: 'any',
      to: [{type: 'article'}, {type: 'product'}],
    },
  ],
}

2: Show only one type in search results

{
  name: 'content',
  type: 'array',
  // when adding an item to this list, you'll be given two options:
  of: [
    // add reference to article - reference picker will only show articles
    {
      type: 'reference',
      name: 'article',
      to: [{type: 'article'}],
    },
    // add reference to product - reference picker will only show products
    {
      type: 'reference',
      name: 'product',
      to: [{type: 'product'}],
    },
  ],
}

When you have lots of reusable content, you'll want to find ways to make finding the right piece easier. You can do this in some cases by defining a static or dynamic filter to limit what results are shown in a reference picker. For some use cases, there's another option as well:

If your field is an array (list) of references, and you are referencing multiple document types, you can use this example to filter the reference search results down.

With snippet 1, the search results will include articles and products. The documents will all be mixed together.

With snippet 2, the editor will select what type of thing they want to reference first. Then the results will only include documents of that type.

Contributor

Other schemas by author