Support multiple relationships with the Array field in Keystatic

Simon Vrachliotis: [0:00] we've created a relationship between the authors and the post, but currently, each post can only have one author. Let's make it so that a post can have multiple authors that collaborated on an article.

[0:10] A relationship() field only lets you pick one entry, but we can use an array() field to wrap around the relationship() field to create a multi-author selector.

[0:21] Let's keep that author() field as is for now. I'll create another one, Authors. Here we'll use fields.array. Inside of it, as copilot is suggesting, we will have our fields, that relationship. The label is authors, with an S. The collection is authors, exactly like we had before, but we've wrapped our relationship() field inside an array() field.

[0:43] If I save it like this, it will work, but the UX will not be that great. Let me show you. I'll go edit my first post. You can see the existing author() field, but if I scroll down, the authors() field is called Items. That's quite confusing. What's happening is we've given a label to the relationship() field, but we haven't given a label to the array() field itself.

[1:04] Here, I can go comma and have an object, and in here, we will have a label of Authors. That will make things much cleaner. You can see that now the label is Authors, but as I select my authors, you can see that item one and item two is still not optimal, to say the least. I'll save that, but let's go and improve the situation by also defining itemLabel.

[1:34] We can't get the actual name of the author, but we can get the value which is the slug. Since it can't be , let's provide a fallback of, "Please select an author".

[1:45] With that in place, the UX is going to be much nicer. You can see we have Jed and Simon. If I was to delete the connection here, we would have, "Please select an author". This is better, but it still doesn't make sense to save relationship without a value. If we look at our first post, you can see that it's going to store in the array, which we probably don't want.

[2:09] Another thing we can do is make sure that this relationship is set in the relationship() field to use the validation key.

[2:19] Here, make sure that 'Is required' is set to true. That way, if I select Simon once again, but then I delete it and try to click done, it is not going to allow me to do so because the author is required. This is a little bit more failproof. Once I save this, our first post has now the two authors.

[2:41] Obviously, we don't want to keep the Author and the authors() field, so let's go and delete the now 'Legacy' authors() field, because if we want only one author, we can use the authors() field with one item.

[2:55] Because we've changed the schema, let's remove this from our first post and second post, and verify that things work. The second post has no authors, so let's add Simon to that one. The first post should have both Simon and Jed, and yep, it does.