Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Discussion on getting only currently used categories and customizing reference input components.

12 replies
Last updated: Oct 27, 2022
What is the best way to get only categories that are currently used? I have a category document that looks like the code snippet and then is used in my post document like so
{
  title: "Category",
  name: "category",
  description: "High level category of the article (FBS or FCS)",
  type: "string",
  options: {
    list: [
      {
        title: "FCS",
        value: "FCS",
      },
      {
        title: "FBS",
        value: "FBS",
      },
    ],
    layout: "radio", // <-- defaults to 'dropdown'
  },
  validation: (Rule) => Rule.required(),
},
{
  title: "Subcategory",
  name: "subcategory",
  description:
    "What subcategory does this article belong to? Could be a conference, a team, etc.",
  type: "reference",
  to: [{ type: "category" }],
  options: { filter: "defined(parent)" },
},
I grab the categories to create a sitemap of them. However, I don't want to grab any that don't have articles under them (if that makes sense)
Oct 26, 2022, 3:33 PM
I'd add a filter that counts the number of incoming references from articles. Something like this should get you categories with at least 1 article attached to them:
*[_type == 'category' && count(*[_type == 'article' && references(^._id)]) > 0]
Haven't tested this, so you may need to tweak it a bit.
Oct 26, 2022, 5:17 PM
Awesome! Looks like that worked! I did change 
article
to 
post
for my use case
export const getCategories = groq`*[_type == "category" && count(*[_type == 'post' && references(^._id)]) > 0]{
  _id,
  title,
  _updatedAt,
  "slug": slug.current,
  description
}`

:gratitude-thank-you:
Oct 26, 2022, 10:27 PM
Awesome!
Oct 26, 2022, 10:34 PM
I do have a question… Is there a way to make references in a bullet list format?
Oct 26, 2022, 10:35 PM
Inside of the Studio or when you're rendering it on the frontend?
Oct 26, 2022, 10:37 PM
What I mean by that... Is right now I am hardcoding the "parent" category by doing
{
      title: "Category",
      name: "category",
      description: "High level category of the article (FBS or FCS)",
      type: "string",
      options: {
        list: [
          {
            title: "FCS",
            value: "FCS",
          },
          {
            title: "FBS",
            value: "FBS",
          },
        ],
        layout: "radio", // <-- defaults to 'dropdown'
      },
      validation: (Rule) => Rule.required(),
    },
and then the subcategory like I mention above... However, it would be nice to get the parent category like I do the subcategory... However, I like the radio layout for this and I haven't been able to figure that out
Oct 26, 2022, 10:37 PM
When I try to add 
layout: "radio"
to
{
  title: "Subcategory",
  name: "subcategory",
  description:
    "What subcategory does this article belong to? Could be a conference, a team, etc.",
  type: "reference",
  to: [{ type: "category" }],
  options: { filter: "defined(parent)" },
},
for example in the 
options
object, it doesn't actually do the radio... it is still a dropdown
Oct 26, 2022, 10:39 PM
Ah got it! You could, but it would need to be a custom input component. I made this component a while back for displaying references as a checklist, but you could adapt it to display a bullet list instead.
Oct 26, 2022, 10:41 PM
Awesome and then if I wanted to get the references that are parents, the filter under the options object would just be “parent” I’m assuming?
Oct 26, 2022, 10:45 PM
Exactly
Oct 26, 2022, 11:13 PM
Ok another question 😅 is there an easy way to update it? So right now I have
{
  title: "Category",
  name: "category",
  description: "High level category of the article (FBS or FCS)",
  type: "string",
  options: {
    list: [
      {
        title: "FCS",
        value: "FCS",
      },
      {
        title: "FBS",
        value: "FBS",
      },
    ],
    layout: "radio", // <-- defaults to 'dropdown'
  },
  validation: (Rule) => Rule.required(),
},
and want to change it to

{
  title: "Category",
  name: "category",
  description: "High level category of the article (FBS or FCS)",
  type: "reference",
  to: [{ type: "category" }],
  options: { filter: "parent" },
  validation: (Rule) => Rule.required(),
},
However, I get what is in the screenshot
Oct 27, 2022, 3:17 AM
Also, is there a way to dynamically show the 
Subcategory
options depending on which category is selected?
Oct 27, 2022, 3:17 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?