CODEWITHSUNDEEP
reactjsjsonapigraphqlstrapi
Srajan Barkade
Srajan Barkade

Reputation: 51

Strapi+Graphql , can't fetch anything from format field

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 format 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 or any feild like name etc from formats

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

function Fetchpic() {
  const Photodata = gql`
    query getimages {
      photos {
        data {
          id
          attributes {
            Name
            Img {
              data {
                attributes {
                  formats:url //<-- 
                }
              }
            }
          }
        }
      }
    }
  `;
  const data = useQuery(Photodata);
  const photosfetch = data.data.photos.data

  console.log(photosfetch);
  return (
    <div>
      <div>
        
      <div className=" p-4 xl:mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 md:gap-2 md:p-4">
          {photosfetch.map((photo) => (
            <div>
              <Photocard
                key={photo.id}
                name={photo.attributes.Name}
                img={photo.attributes.Img.data.attributes.format.url} //<-- problem is here 
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Fetchpic;

also it showed this error in strapi-gql playground when i tried to access fields inside the format , i am very new to gql and i speculate this can be the reason somehow ?

enter image description here

Upvotes: 2

Views: 563

Answers (1)

Isfaaq
Isfaaq

Reputation: 445

Remove the subfield selection in image.

...
Title
image
...

The error you are getting is because images are returned as JSON and hence you cannot select subfields within it. =

Upvotes: 0

Related Questions