Hello everyone I have function like that.When I tried to call my datas I can just reach to first index of each array.For example I have 5 different pictures of playstation but on my web page I just see 1 picture. How can I fix it?Is something missing in function or should change to function ?

in advance thank you

import React from 'react'
import { gql, useQuery } from '@apollo/client';
import { Image } from 'antd';
import { useState } from 'react';

const GET_TECH = gql`
query AllItem{
 categories{
  name
  products{
    name
    brand
    attributes{
      name
      id
    }
    gallery
    category
    prices{
      currency{
        label
        symbol
      }
      amount
    }
    inStock
    description
  }
}
}
`;


function Tech() {
  const { loading, error, data } = useQuery(GET_TECH);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  console.log(data);
  return (
    <div className='pageLayout'>
  {
     (data.categories).map((item,index) => {
    //const {name,brand,description,gallery,category} = item;
        {
      return (item.products).map((itemPrdct,subIndex) => {
    
        const {name,brand,description,gallery,category} = itemPrdct; 
          if(category === "tech"){
            console.log(name)
            return(
             <div className="tech" key = {subIndex}>
                <p className='nametag' >{brand}</p> 
                <Image width={200} src={gallery}  className='gallery'/>
               </div>
              )        
         }
        })
        
      }
    })
    
  }
    </div>
  )
}

export default Tech


> //Graphql structure

{
  "data": {
    "categories": [
      {
        "name": "all",
        "products": [
          {
            "name": "Nike Air Huarache Le",
            "brand": "Nike x Stussy",
            "attributes": [
              {
                "name": "Size",
                "id": "Size"
              }
            ],
            "gallery": [
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_2_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_1_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_3_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_5_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_4_720x.jpg?v=1612816087"
            ],

console.log

CodePudding user response：

I was thinking if gallery is an array then it should use map on arrays

  const {name,brand,description,gallery,category} = itemPrdct; 
          if(category === "tech"){
            console.log(name)
            return(
             <div className="tech" key = {subIndex}>  // key can be `${idx}${subIndex}` if products are repeating
                <p className='nametag' >{brand}</p> 
                     gallery?.map((url, idx) => {
                            return (<Image key={idx}  width={200} src={url}  className='gallery'/>)
                     }
               </div>
              )        
         } // else { return (<EmptyElement /> } // consider returning empty element 
  })

  // map through the image
        gallery?.map((url, idx) => {
         return (<Image key={idx}  width={200} src={url}  className='gallery'/>)
      }

you can use useMemo to transform the response and filter out empty elements then map the items as needed

hope it works