Skip to content
Get help on Slack

Managing fields in Sanity Studio: grouping and organizing schemas

11 replies
Last updated: Dec 8, 2022
Could I do something like this?
export default {
  name: 'Foo',
  type: 'document',
  fields: [title, description],
};

// And then have title and description somewhere else:

const title = {
  name: 'title',
  type: 'string',
  validation: (Rule) => Rule.required().error('The title is required.'),
};

const description = {
  name: 'description',
  type: 'text',
  validation: (Rule) => Rule.required().error('The description is required.'),
};
Dec 8, 2022, 10:46 PM
I assume I could turn title and description into functions, and just call them.
Dec 8, 2022, 10:58 PM
Is this a good idea though?
Dec 8, 2022, 11:01 PM
Kind of difficult to manage the fields otherwise.
Dec 8, 2022, 11:01 PM
Yeah, you could turn them into functions. This is useful if you need to make schema that's mostly the same in multiple places in your Studio. You can also just set them up as their own schema files.
If they're simple schemas, though, it's likely better to just define them in the document.
Dec 8, 2022, 11:02 PM
That will work just fine
user Y
- I personally tend to split fields into a few groups and store each groups fields in a separate file, which works fine for simple schemas and I find it to be "neater". It could become an anti-pattern as your schemas complexity increases though
Dec 8, 2022, 11:04 PM
user C
Could you give a simple example of how you group fields? - I am just wondering, if you are grouping it according to type, like string, text, richText etc.
Dec 8, 2022, 11:07 PM
As an example, I am thinking about creating functions like this:
export const string = (name, group) => ({
  name: name,
  type: 'string',
  group: group,
  validation: (Rule) => Rule.required().error(`The ${name} is required.`),
});
Would this be a bad idea?
Dec 8, 2022, 11:14 PM
Not according to type, but to the fields purpose, for example:

article.ts:
export default defineType({
  name: 'article',
  type: 'document',
  groups: [
    {
      name: 'content',
      title: 'Content',
      default: true,
    },
    {
      name: 'seo',
      title: 'SEO',
    },
    {
      name: 'settings',
      title: 'Settings',
    },
  ],
  fields: [...content, ...seo, ...settings],
})
./groups/content.ts:

const group = 'content';
const content = [
    defineField({
        name: 'title',
        type: 'string',
        group,
    }),
    defineField({
        name: 'image',
        type: 'image',
        group,
    }),
    defineField({
        name: 'description',
        type: 'text',
        group,
    })
];

export default content;
Dec 8, 2022, 11:16 PM
The function isn't a horrible idea, but you would be giving up a lot of control over those fields, even for things like the custom error message. Depending on the context the message could require less or more specificity for example.
Dec 8, 2022, 11:18 PM
And if you extend the function with additional props to get back some of the control, you might end up reinventing the wheel 😄
Dec 8, 2022, 11:19 PM
You are right, this function could turn horribly complex if I am adding more and more parameters. 😅
Dec 8, 2022, 11:20 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.

Get started for freeExplore the demo

Was this answer helpful?