Skip to content
Get help on SlackWatch Sanity demo

"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
And 
parentChild
looks like this
Oct 12, 2022, 4:57 PM
The 
template.seriallize
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 
parentChild
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
.initialValueTemplates([
  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 [
  T.template({
    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
  ...T.defaults(),
]
Oct 12, 2022, 5:16 PM
Yup I have
import T from "@sanity/base/initial-value-template-builder";

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

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 =>
          `/` +
          input
            .split('-')
            .map(title =>
              title
                .toLowerCase()
                .replace(/\s+/g, '-')
                .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '')
            )
            .join('/'),
      },
    },
Note that 
studioClient
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

The Sanity Composable Content Cloud is the 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 startedWatch demo

Was this answer helpful?

Categorized in