๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

"Troubleshooting a Parent/Child Taxonomy in Sanity Studio"

21 replies
Last updated: Oct 12, 2022
So I followed the Creating a Parent/Child Taxonomy guide. However, when I click into a category it completely breaks now ๐Ÿ†˜ I am guessing because there hasn't been a child/subcategory published but I feel like there should be some default state that would say "Hey you didn't publish a sub-category, when you do they will show up here!" or something like that ๐Ÿ˜…
Oct 12, 2022, 4:04 PM
Oh no! What does your structure look like at this point?
Oct 12, 2022, 4:53 PM
So I followed that guide pretty much exactly.
Oct 12, 2022, 4:56 PM
This is what my desk structure looks like
Oct 12, 2022, 4:56 PM
looks like this
Oct 12, 2022, 4:57 PM
error makes me thing it may have something to do with your initial value templates, but since you're opening an existing document that doesn't seem right. Can you drop your
in here just to double check that something didn't get lost?
Oct 12, 2022, 5:00 PM
Yeah it is right above your comment unless it didn't go through... I have had some issues where some messages/comments aren't going through on Slack ๐Ÿ˜•
Oct 12, 2022, 5:03 PM
So the initial value template is
  S.initialValueTemplateItem("category-child", {
    parentId: parent._id,
so I guess it is looking for the child/sub-categories to render
Oct 12, 2022, 5:04 PM
Oh, I see it now ๐Ÿ‘๏ธ ๐Ÿ‘„ ๐Ÿ‘๏ธ
Oct 12, 2022, 5:04 PM
Ok, let me see if I can replicate the error and find a fix
Oct 12, 2022, 5:04 PM
Have you also added the initial value template in this step?
// ./src/initial-value-templates/index.js

import T from '@sanity/base/initial-value-template-builder'

export default [
    id: 'category-child',
    title: 'Category: Child',
    schemaType: 'category',
    parameters: [{name: `parentId`, title: `Parent ID`, type: `string`}],
    // This value will be passed-in from desk structure
    value: ({parentId}) => ({
      parent: {_type: 'reference', _ref: parentId},
  // Insert all your other Templates
Oct 12, 2022, 5:16 PM
Yup I have
import T from "@sanity/base/initial-value-template-builder";

export default [
    id: "category-child",
    title: "Category: Child",
    schemaType: "category",
    parameters: [
        name: "parentId",
        title: "Parent ID",
        type: "string",
    value: ({ parentId }) => ({
      parent: { _type: "reference", _ref: parentId },

Oct 12, 2022, 5:22 PM
I think the issue is I don't have any children created/published, but I feel like that shouldn't matter/crash the studio
Oct 12, 2022, 5:24 PM
I don't have any children published but I'm not getting that error. Hmm...
Oct 12, 2022, 5:24 PM
Maybe I don't have the template imported somewhere? Does it need to be imported somewhere?
Oct 12, 2022, 5:26 PM
๐Ÿคฆ I think I need to do
  "name": "part:@sanity/base/initial-value-templates",
  "path": "./initialValueTemplates.js"

Oct 12, 2022, 5:28 PM
Ah, yes! If you haven't added that part that could be causing the issue!
Oct 12, 2022, 5:29 PM
Yup! That was it ๐Ÿคฆ I always skip over the links because I think the guide will include everything but I get it ๐Ÿ˜† PEBKAC
Oct 12, 2022, 5:30 PM
Admittedly, I also often skip the links ๐Ÿ˜…
Oct 12, 2022, 5:30 PM
In the first screenshot in that guide it shows generating the child slug but that isnโ€™t covered in the guide. Any guidance on how to implement that?
Oct 12, 2022, 5:37 PM
Yeah, I think I have a snippet for that somewhere. Let me search.
Oct 12, 2022, 5:40 PM
Ok, you could simplify the regex stuff if you use an external slugify package, but this should work:
      name: 'slug',
      type: 'slug',
      options: {
        source: async ({ parent, title }) => {
          const parentTitle = await studioClient.fetch(
            `*[_id == $parentId][0].title`,
              parentId: parent._ref,

          return `${parentTitle}-${title}`;
        slugify: input =>
          `/` +
            .map(title =>
                .replace(/\s+/g, '-')
                .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '')
Note that
is just a configured client I use around my studio. It looks like this:
import client from 'part:@sanity/base/client';

export const studioClient = client.withConfig({ apiVersion: '2021-10-21' });
Oct 12, 2022, 6:03 PM

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.

Was this answer helpful?