Fetch list images use NextJs and Strapi for slider

Question

[]

I want to create a slider. I get an error when I try to output an array of objects.Error here . Who can I fix this? Thanks

Screenshot from admin panel1

Code to get list of slides

interface Picture {
    data: {
        id: string;
        attributes: {
            url: string;
            name: string;
            alternativeText: string;
        };
    };
}

interface Slide {
    data: {
        id: string;
        title: string;
        picture: Picture;
    }
}

interface SliderProps {
    data: {
        slides: Slide[];
    };
}

export default function Slider({ data }: SliderProps) {
    return (<div>
            {data.slides.map((slide: Slide, index: number) => (
                <span key={index}>
                    {slide.data.title}
                </span>
            ))}
        </div>);
}

Answer 1

You need to use populate:

const query = qs.stringify({
  populate: {
    Slider: {
      populate: {
        picture: true
      }
    }
  }
})

const { data } = await axios.get(`http://localhost:1337/api/nameOfApi?${query}`)

https://www.npmjs.com/package/qs

P.s. would recommend using this https://market.strapi.io/plugins/strapi-plugin-untransform-response straightaway makes your life significantly easier