How to fetch item from array (first image in an array of images) from SanityClient?

Viewed 16

I have a group of sets, I want to show an image from each set on my webpage which users can use as a link to their respective galleries. So I want to fetch an item (an image) from an array of images. I don't have a specific image picked for each category, so I would just be getting the first image within its array of images to use. I am getting this error: description: "expected '}' following object body"

import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';

const gallery = () => {

const [ galleryData, setGalleryData ] = useState(null);

useEffect(() => {
  client.fetch(
    `*[_type == 'set']{
      set_name,
      set_images[]->{
        image{->asset{
          _id,
          url
        }}
      }
    }`
  ).then((data) => setGalleryData(data))
  .catch(err => console.error(err))
})

  return (
    <div>
    <Header />
    <main className="main-gallery"> 
      <div className="title">
          <div className="title-line-left"></div>
          <h2>gallery</h2> 
          <div className="title-line-right"></div>
      </div>
      <div className="categories">
          <ul className="categories-container">
            {galleryData && galleryData.map((set, index) => (
                <li key={index}>
                    <Link href="/sets"><img src={urlFor(set.set_images.image[0]).auto('format').url()} alt={set.set_name}/></Link>
                </li>
            ))}
          </ul>
      </div>
    </main>
    <Footer />
    </div>
  )
}

This is my sanity schema:

export default {
name: 'set',
type: 'document',
title: 'Set',
fields: [
    {
        name: 'set_name',
        type: 'string',
        title: 'Set Name',
    },
    {
        name: 'set_images',
        type: 'array',
        title: 'Set Images',
        of: [
            {
                name: 'image',
                type: 'image',
                title: 'Image',
                options: {
                    hotspot: true,
                },
                fields: [
                    {
                        name: 'alt',
                        type: 'string',
                        title: 'Alternative Text',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'name',
                        type: 'string',
                        title: 'Name',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'date',
                        type: 'string',
                        title: 'Date',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'size',
                        type: 'string',
                        title: 'Size',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'materials',
                        type: 'string',
                        title: 'Materials',
                        options: {
                            isHighlighted: true
                        }
                    },
                ]
            },
        ]
    },
    {
        name: 'slug',
        title: 'Slug',
        type: 'slug',
        options: {
            source: 'set_name'
        }
    }
]
}
1 Answers

This fixed it:

 useEffect(() => {
  client.fetch(
    `*[_type == 'set']{
      set_name,
      'setSelect' : set_images[0].asset->{_id,url}}`
  ).then((data) => setGalleryData(data))
  .catch(err => console.error(err))
})

and then {set.setSelect}

Related