How to fetch image url from formats

[srajan_barkade1]

hi , i am building a photography portfolio with strapi as my backend and cloudinary as my image host with graphql to fetch data in my application

i tested this api in strapi’s graphql playground where it works fine and fetches everything wonderfully

i was able to use ids and name from api but when it comes to formats field which hold formats and image url i am unable to fetch anything from it

i am stuck at fetching image’s url from graphql api’s format field it does not show any errors in console but does not fetch the image url from formats while fetching

import React from "react";
import { gql, useQuery } from "@apollo/client";
import Photocard from "./Photocard";

function Fetchpic() {
  const Photodata = gql`
    query getimages {
      pics {
        data {
          id
          attributes {
            Title
            image {
              data {
                attributes {
                  formats:url
                }
              }
            }
          }
        }
      }
    }
  `;
  const data = useQuery(Photodata);
  const photosfetch = data.data.pics.data
  console.log(photosfetch);
  return (
    <div>
      <div className="flex justify-center font-mono font-extrabold text-lg mt-6 ">
        Home
      </div>
      <div className="flex justify-center">
      <div className=" p-4 xl:mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 md:gap-2 md:p-4">
          {photosfetch.map((photos) => (
            <div>
              <Photocard
                key={photos.attributes.title}
                name={photos.attributes.Title}
                img={photos.attributes.image.data.attributes}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Fetchpic;

also in graphql playground it gives me this error when i try to fetch a specific field from formats but works well when i use “formats:[name of the field like url]”

i am new to strapi and gql please help

[sven_folkerts]

From my knowledge, there is no need through iterate through the data and attributes.
Simply query as follows:

image {
   formats
}

it should return:

image {
   formats {
      thumbnail {
         url
      }
   }
}

[miketyson]

Same need this to setup on traeger vs pit boss but unable to fetch up image url from formats.