😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Create an Array With Two Types - Mixing Primitive Types

22 replies
Last updated: Jan 29, 2021
I just encountered this error when trying to create an array with two types. Is this not possible, or am I doing something wrong? 😬
Jan 27, 2021, 8:34 PM
It's a bit subtle, but
image
 is an actually an object type, and you can't mix primitive types (like numbers and strings) with object types. That means that you have to put your
string
 inside of an object. So:
of: [ { type: 'object', fields: [{type: 'string', name: 'text'}]}, { type: 'image' }]

Jan 27, 2021, 8:36 PM
Ohh, of course! I did know about that rule, I just didn't think of the fact that image is not a primitive type. Thanks a lot, Knut! 💕
Jan 27, 2021, 8:39 PM
Not at all! I think this is a pretty common stumbling block tbh.
Jan 27, 2021, 8:41 PM
If you don't mind, I have another question.. Or well, could you assist me in how to write the query for this, to be able to use a referenced image and get the text, too? My code right now looks something like this, but the browser doesn't like it..
"test_steps" : test_steps[] {"image":asset->{tags,url}}.image
Jan 27, 2021, 8:58 PM
Ah, but you can also do:
{
  name: 'gallery',
  type: 'array',
  of: [
  {
    type: 'image',
    fields: [
      {
        name: 'alt',
        type: 'string',
      },
      {
        name: 'caption',
        type: 'string',
      }
    ]
  }
]

🙂
Jan 27, 2021, 9:04 PM
If I get what you're trying to do
Jan 27, 2021, 9:04 PM
Hmm, I'm building a site for a girl who writes recipes, as well as a lot of other things, and right now I'm building her recipe-page. This part is for the step-by-step when cooking the recipe, in which I want her to be able to put images in between the steps.. When typing this I'm wondering if maybe it would be easier just to build that functionality myself in the frontend instead, since it's a lot easier for her to just enter all steps in text-form without complicating it.. hmm.
Jan 27, 2021, 9:07 PM
My wish was to query for the entire array that consists of both text-parts and images..
Jan 27, 2021, 9:08 PM
Ah! Get ya. But Sanity is perfect for recipes 🙂 And you can totally do that,
Jan 27, 2021, 9:08 PM
(two seconds)
Jan 27, 2021, 9:09 PM
I think I got it 🙂 Or well, this one worked..
"test_steps" : test_steps[] {"image":asset->{tags,url}, "text": text},
Jan 27, 2021, 9:09 PM
It's just that the ui is looking a bit easier when just adding text to an array, rather than having to choose and entering each step into a modal box. 🙂
Jan 27, 2021, 9:10 PM
Ah, got ya
Jan 27, 2021, 9:11 PM
I really, really appreciate your help. I can't even begin to describe how amazed I am by your company and your level of service and kindness 🙂
Jan 27, 2021, 9:11 PM
That's great to hear!
Btw. I know that
user S
has built a pretty cool recipe blog, He might have some insights too https://www.sanity.io/projects/merearchive
Jan 27, 2021, 9:12 PM
Oh, I will definitely check that out! 😊
Jan 27, 2021, 9:16 PM
Yeah you can see how I structured the recipe part. I didn't put too much effort to make a custom input form for that, and just used the built-in forms even they might be a bit verbose in my case. (The only person using it is my wife and she's now used to it 🙂)
Jan 27, 2021, 9:20 PM
Wow, that page of yours looks really good! 🌟 Very inspirational to see how you worked with the studio! I'm working on my final project for my 6 months frontend bootcamp, and so far it looks like this (all the other food-pages looks a bit off since I'm trying out different solutions for the steps 😅):
https://carolineborg.netlify.app/food/glutenfria-scones-med-havregryn
Jan 28, 2021, 9:15 AM
Wow I love the design, photos, fonts and everything!In my project my wife and I wanted to provide recipes for both people in USA and those that are not, because Korean food seems to become more popular in USA and they need different measuring units
🙂 So I went down the rabbit hole to provide recipes with unit converter. Otherwise, it could've been a simple array of strings.
Jan 28, 2021, 9:18 AM
Ohh I just saw that! Amazing 🙂 Did you solve the convert-functionality in the frontend, or do you run some sort of function in the backend?
Jan 28, 2021, 9:25 AM
The converter is on the frontend :)
Jan 29, 2021, 8:24 AM

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.

Was this answer helpful?