How to set a slug for a product variant in Sanity and how to handle routes in Gatsby for product variants.

products.js

    {
      title: 'Variants',
      type: 'array',
      of: [
        {
          title: 'Variant',
          type: 'productVariant',
        },
      ],
    },

productVariant.js

export default {
  title: 'Product variant',
  name: 'productVariant',
  type: 'object',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      title: 'Slug',
      name: 'slug',
      type: 'slug',
    },

// productVariant.js

export default {
  title: 'Product variant',
  name: 'productVariant',
  type: 'object',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      title: 'Slug',
      name: 'slug',
      type: 'slug',
      options: {
        source: (_, {parent}) => {
          return parent.title
        },
      },
    },
  ]
}

// products.js

export default {
  name: 'products',
  type: 'document',
  fields: [
    {
      title: 'Variants',
      name: 'variants',
      type: 'array',
      of: [
        {
          title: 'Variant',
          type: 'productVariant',
        },
      ],
    },
  ],
  preview: {
    select: {
      variant0: 'variants.0.title',
      variant1: 'variants.1.title',
      variant2: 'variants.2.title',
      variant3: 'variants.3.title',
    },
    prepare: ({...variants}) => {
      const productVariants = Object.values(variants).filter(Boolean);
      return {
        title: `Variants: ${productVariants.length > 0 ? productVariants.join(', ') : 'None'}`,
      }
    }
  }
}