"Troubleshooting a Parent/Child Taxonomy in Sanity Studio"
21 replies
Last updated: Oct 12, 2022
J
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
J
So I followed that guide pretty much exactly.
Oct 12, 2022, 4:56 PM
J
This is what my desk structure looks like
Oct 12, 2022, 4:56 PM
J
And
parentChildlooks like this
Oct 12, 2022, 4:57 PM
The
template.seriallizeerror 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
parentChildin here just to double check that something didn't get lost?
Oct 12, 2022, 5:00 PM
J
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
J
So the initial value template is
so I guess it is looking for the child/sub-categories to render
.initialValueTemplates([
S.initialValueTemplateItem("category-child", {
parentId: parent._id,
}),
]),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
J
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
J
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
J
Maybe I don't have the template imported somewhere? Does it need to be imported somewhere?
Oct 12, 2022, 5:26 PM
J
🤦 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
J
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
J
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:
Note that
{
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('/'),
},
},studioClientis 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.