Get help on Discord

Export Video Set: 'VideoSet'

1 replies
Last updated: Jul 1, 2022
Hello everybody,I was wondering if someone knows if it is possible to access the fieldset "language' and 'muxVideo' in my custom Input component called 'VideoSet'. When I use the props.type object, I can just see 'title', 'localIdentifier', 'tags' and 'languagespecificVideos'. Is it possible to access the fields of the array?
Thank you very much!

export const videoSet: IObjectType = {
  name: 'muxVideoSet',
  title: 'Mux Video Set',
  type: 'object',
  fields: [
    {
      name: 'language',
      title: 'Language',
      type: 'string',
      validation: (Rule: IRuleType): IRuleType => Rule.required(),
    },
    {
      title: 'Video',
      name: 'muxVideo',
      type: 'muxVideo',
    },
  ],
};

const video: IDocument = {
  name: documentType,
  title: 'Video Set Document',
  type: 'document',
  icon: () => getDocumentIcon('videoSet'),

  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      name: 'localeIdentifier',
      title: 'Locale Identifier',
      type: 'reference',
      to: [{ type: 'localeIdentifier' }],
      options: {
        filter: regionMasterPrimaryLanguageFilter,
      },
      validation: (Rule: IRuleType): IRuleType => Rule.required(),
    },
    {
      name: 'tags',
      title: 'Tags',
      description: 'Freetext tag to help find the video.',
      type: 'array',
      options: {
        layout: 'tags',
        editModal: 'popover',
      },
      of: [{ type: 'string' }],
    },
    {
      title: 'Language Specific Videos',
      name: 'languageSpecificVideos',
      type: 'array',
      of: [{ type: 'videoSet' }],
      inputComponent: VideoSet,
    },
  ],

  preview: {
    select: {
      title: 'title',
    },
  },
};

export default video;
AI Update

Based on your schema structure, yes, you can access the nested fields (language and muxVideo) from your array items! When you have an array of objects, the field definitions are available through props.schemaType.of[0].fields.

Here's how to access them in your custom VideoSet component:

const VideoSet = (props) => {
  // Access the array item schema
  const arrayItemSchema = props.schemaType.of[0];
  
  // Access individual fields from the videoSet object type
  const languageField = arrayItemSchema.fields.find(field => field.name === 'language');
  const muxVideoField = arrayItemSchema.fields.find(field => field.name === 'muxVideo');
  
  console.log('Language field:', languageField);
  console.log('Mux Video field:', muxVideoField);
  
  // Now you can use these field definitions as needed
  return (
    // Your component JSX
  );
};

The structure works like this:

  • props.schemaType contains the schema for the array field (languageSpecificVideos)
  • props.schemaType.of is an array containing the types that can be in the array
  • props.schemaType.of[0] gives you the first (and in your case, only) type definition - your videoSet object
  • props.schemaType.of[0].fields is an array containing all the field definitions for that object (language and muxVideo)

If you want to iterate over all fields:

const VideoSet = (props) => {
  const arrayItemSchema = props.schemaType.of[0];
  
  arrayItemSchema.fields.forEach(field => {
    console.log(`Field name: ${field.name}, type: ${field.type}`);
  });
  
  return (
    // Your component JSX
  );
};

This is a common pattern when building custom input components for arrays, especially when you need to access the schema metadata of nested fields to build dynamic interfaces or validation logic. The schemaType prop gives you full access to the type definitions, which is particularly useful when you need to understand the structure of complex nested types or build components that adapt based on the schema configuration.

user M
forgive me if I'm misunderstanding what you're looking for, but I believe you need the 
withDocument
HOC to access that info here.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?