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.

Answer 1

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,
            }
          }
        }
      }
    }
  ]
}