Watch a live product demo ๐Ÿ‘€ See how Sanity powers richer commerce experiences

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

The Sanity Composable Content Cloud is the 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.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? Iโ€™m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing