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'
}
}
]
}