How to filter references based on change in another reference?

Question

I have created an object with 3 reference fields - categories, subcategories, and types. I want the subcategories to show subcategories related to the selected category.

{
      title: "Product Category",
      name: "category",
      type: "object",
      fields: [
        {
          name: "categories",
          type: "reference",
          to: [
            {
              type: "categories",
            },
          ],
        },
        {
          name: "subcategories",
          type: "reference",
          to: [
            {
              type: "subcategories",
            },
          ],
        },
        {
          name: "types",
          type: "reference",
          to: [
            {
              type: "types",
            },
          ],
        },
      ],
    },

I tried the filter option as mentioned in docs but can't seem to get it working so I removed it.

This is how I defined the categories and subcategories.

// categories.js
export default {
  name: "categories",
  type: "document",
  title: "Categories",
  fields: [
    {
      name: "category",
      type: "string",
      title: "Category name",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      description: "URL friendly name",
      options: {
        source: "category",
        maxLength: 96,
      },
    },
    {
      title: "Description",
      name: "description",
      type: "text",
    },
  ],
};

// subcategories.js
export default {
  name: "subcategories",
  type: "document",
  title: "Subcategories",
  fields: [
    {
      name: "subcategory",
      type: "string",
      title: "Subcategory name",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      description: "URL friendly name",
      options: {
        source: "subcategory",
        maxLength: 96,
      },
    },
    {
      name: "categories",
      type: "reference",
      to: [
        {
          type: "categories",
        },
      ],
    },
  ],
};

Any help is appreciated.

I expect to choose a category first, then the subcategory will become available and show results based on the selected category — , Jun 17 '20 at 19:24
I can't understand your requirement, maybe if you show an example of the expected result we could help you more easily — Mario, Jun 17 '20 at 19:53
You probably won't be able to make subcategories be unable until you select a category first. That said, maybe you could consider moving subcategories inside the `categories` object? The `filter` field should work, but maybe only directly on the `reference` type. Hard to see when we can't see the definition of `subcategories` and `categories`. — Anders Stensaas, Jun 18 '20 at 07:23
@AndersStensaas I have shown how I defined categories and subcategories above. Please check — , Jun 18 '20 at 07:42

Anders Stensaas · Answer 1 · 2020-07-08T13:04:41.820

Based on your schema, I think this should work:

export default {
  title: "Product Category",
  name: "category",
  type: "object",
  fields: [
    {
      name: "categories",
      type: "reference",
      to: [
        {
          type: "categories",
        },
      ],
    },
    {
      name: "subcategories",
      type: "reference",
      to: [
        {
          type: "subcategories",
        },
      ],
      options: {
        filter: 'references($category._id)',
        filterParams: {category: 'categories'}
      }
    },
    {
      name: "types",
      type: "reference",
      to: [
        {
          type: "types",
        },
      ],
    },
  ],
}

This adds the filter and filterParams to the options object on the subcategories field. This should narrow down the items that is selectable in the reference picker.

EDIT: This should get the job done for you. It will also not yield any results if categories isn't set already:

export default {
  title: 'Product Category',
  name: 'category',
  type: 'object',
  fields: [
    {
      name: 'categories',
      type: 'reference',
      to: {type: 'categories'}
    },
    {
      name: 'subcategories',
      type: 'reference',
      to: {type: 'subcategories'},
      options: {
        filter: ({ document }) => {
          console.log(document)
          if (!document.category || !document.category.categories) {
            return;
          }
          return {
            filter: "categories._ref == $category",
            params: {
              category: document.category.categories._ref,
            }
          }
        }
      }
    }
  ]
}

After you selected a category which has subcategories linked to it? — Anders Stensaas, Jun 19 '20 at 07:23
This time, subcategories show all the subcategories instead of the ones related to the selected category. — , Jun 19 '20 at 08:24
Please reach out in the community Slack. It's easier to have a discussion there. We can post the answer to it here later. https://slack.sanity.io/ — Anders Stensaas, Jun 19 '20 at 11:16
I edited the last answer to be correct in regards to what we found out together in the comunity Slack. — Anders Stensaas, Jul 08 '20 at 13:05

How to filter references based on change in another reference?

1 Answers1