Cannot read properties of undefined (reading 'current') I can't get slug from array

Question

current page not displayed

I can't get current slug from array

stack: backend: Sanity Frontend: Astro.build

Sanity

import { defineField, defineType } from 'sanity'

export default defineType({
    name: 'art',
    title: 'Arts',
    type: 'document',
    fields: [
        defineField({
            name: 'year',
            title: 'Year',
            type: 'string',
            options: {
                hotspot: true,
            },
        }),
        defineField({
            name: 'images',
            title: 'Arts',
            type: 'array',
            of: [{
                name: 'object',
                title: 'object',
                type: 'object',
                options: {
                    hotspot: true,
                },
                fields: [{
                        name: 'image',
                        type: 'image',
                        title: 'image',
                    },
                    {
                        name: 'title',
                        type: 'string',
                        title: 'Title',
                    },
                    {
                        name: 'slug',
                        title: 'Slug',
                        type: 'slug',
                        options: {
                            source: 'title',
                            maxLength: 96,
                        },
                    },
                ],
            }, ],
        }),
    ]
})

Astro [slug].astro

---
import Layout from '../../layouts/Page.astro'
import { useSanityClient } from "astro-sanity";

export async function getAllArts() {
    const query = `*[_type == 'art']`;
    const data = await useSanityClient().fetch(query);
    return data;
}

export interface Props {
  art: any;
}

export async function getStaticPaths() {
  const allArtInfo = await getAllArts();
  return allArtInfo.map(art => ({params: { slug: art.images.slug.current }, props: {art}}));
}

const { art } = Astro.props;

const seo = {
  title: '',
  description: '',
}

---

<Layout seo={seo}>
  <!-- <h1>{art.title}</h1> -->
</Layout>

Trying to display the current page from the "images" array

As soon as I didn 't write output: Cannot read properties of undefined (reading 'current')

if add [0] before "images"

return allArtInfo.map(art => ({params: { slug: art.images[0].slug.current }, props: {art}}));

the page is displayed with the current slug. only the first array. how to make everything work fine?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON https://developer.mozilla.org/en-US/docs/Web/API/console/table — This Guy, Jan 09 '23 at 19:28
The issue is pretty clear. `art.images` is an array of objects, so you should map it to get an array that contains the `slug` of each item. That's the one you want to use to set the `params`. — ivanatias, Jan 11 '23 at 04:00

score 0 · Answer 1 · answered Jan 16 '23 at 18:01

So you have an array of arts and each has an array of images, so you have an array of an array of images that you need to unroll in a single array while keeping reference to the art in each image that you need to pass as prop.

You need a double loop, first loop through all art, in which you have second loop through the images. Then you push a new struct with the second loop image and the loop art, like this

export async function getStaticPaths() {
    const allArtInfo = await getAllArts();
    const allArtImages = []
    allArtInfo.forEach(art => {
        art.images.forEach((image)=>{
            allArtImages.push({image:image,art:art})
        })
    });
    return allArtImages.map(image => ({params: { slug: image.slug.current }, props: {image.art}}));
}

Cannot read properties of undefined (reading 'current') I can't get slug from array

1 Answers1