Let's look back to our Social Media Link field - a URL schema type we added to add a link to one of our social media profiles.
...,{ name: 'socialMediaLink', type: 'url', title: 'Social Media Link', group: 'metadata',},...,What if I want to put multiple links to my many social media profiles? Like my Twitter, Instagram, MySpace, etc. Do I add a new field for each new profile?
That's where Array schema types come in. With this schema type, we can create an ordered list of any schema type and size we want.
Let's replace our socialMediaLink field with the following array schema type:
...,{ name: 'socialMediaLinks', type: 'array', title: 'Social Media Links', group: 'metadata', of: [ { type: 'url', }, ],},...,It looks like a normal schema type, just with a different type, and a new of field, which specifies what field we want to use. If we go back to Studio, you'll see this new field:
We can now add as many social media links as we want! Let's take it a step forward by making a new object to use in this field, rather than the URL schema field.
Making a Labeled Link Object
Create a new file in the /schemas/objects folder called labeledLink.js. Now, let's add both a string and URL field to it.
export default { name: 'labeledLink', type: 'object', title: 'Labeled Link', fields: [ { name: 'label', type: 'string', title: 'Label', validation: (Rule) => Rule.required().min(5).max(50), }, { name: 'url', type: 'url', title: 'URL', validation: (Rule) => Rule.required(), }, ],}Make sure to add it to /schemas/index.js!
import blogPost from './blogPost'import labeledLink from './objects/labeledLink'
export const schemaTypes = [blogPost, labeledLink]Now, let's update our socialMediaLinks array schema type to use this new object:
...,{ name: 'socialMediaLinks', type: 'array', title: 'Social Media Links', group: 'metadata', of: [ { type: 'labeledLink', }, ],},...,If we go back to Studio, and add a new item, it looks a lot different!
Add a few different social media links, and then we'll move on.different social media links, and let's continue on.
Using GROQ with Arrays
Let's use a bit of GROQ to see how these Arrays appear when we want to fetch data. Fetch the following query in Vision:
*[_type == "blogPost"][0] { title, socialMediaLinks[] { label, url }}
Compared to when we used GROQ with objects and other schema types previously, we need to add [] when we want to focus in on the fields within an array. You should get a result like this:
{…} 2 properties socialMediaLinks:[…] 3 items 0:{…} 2 properties label:Twitter url:https://twitter.com 1:{…} 2 properties label:Instagram url:https://instagram.com 2:{…} 2 properties label:Facebook url:https://facebook.com title:This is my first blog post! Can't you believe it??
You can notice that the items inside socialMediaLinks are all zero-base numbered, common in all types of arrays we will work with.