CODEWITHSUNDEEP
next.jsgraphqlcontentful
Shaikh Zeeshan
Shaikh Zeeshan

Reputation: 11

GraphQL Query to Contentful Returns Only One Image in imagesCollection Despite Multiple Images Being Present

I'm working on a Next.js project using Contentful as my CMS. I'm fetching room details, including a collection of images, through a GraphQL query. In the Contentful UI, the room entry contains multiple images in the imagesCollection. However, when I run the GraphQL query in my code, the imagesCollection.items array only returns one image object, even though multiple images are associated with the room.

{
  roomsCollection(where: { id: "ROOM_ID" }, order: id_ASC) {
    items {
      id
      roomType
      hotelSlug
      included
      imagesCollection {
        items {
          title
          description
          url
          fileName
        }
      }
    }
  }
}

The imagesCollection.items array in the response only contains one object, while in Contentful, multiple images are linked to the room.

Other fields like roomType, hotelSlug, and included are fetched correctly.

Steps I've Taken:

  1. Checked the Contentful entry: All the images are correctly uploaded and published.
  2. Tested the query in the Contentful GraphQL Playground: It returns all the images correctly.
  3. Confirmed that the rest of the data (e.g., roomType, included) is being fetched without issues.

My Fetching Function:

export async function getRoomDetailsById(
  id: string
): Promise<{ RoomCollectionItem: RoomCollectionType[] }> {
  const response = await fetch(ApiUrl, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
        {
          roomsCollection(where: { id: "${id}" }, order: id_ASC) {
            items {
              id
              roomType
              hotelSlug
              included
              imagesCollection {
                items {
                  title
                  description
                  url
                  fileName
                }
              }
            }
          }
        }
      `,
    }),
  });

  const json: ApiResponse = await response.json();
  console.log(json.data.roomsCollection.items[0].imagesCollection.items);
  
  return {
    RoomCollectionItem: json.data.roomsCollection.items,
  };
}

Upvotes: 1

Views: 66

Answers (2)

Paulo Gomes
Paulo Gomes

Reputation: 46

Hard to say with the information provided, the first thing would be to check that you may have stale data in your next.js component (ensure you have cache disabled in the browser and try to use no-store in the fetch next headers), although you are using a POST for the fetch so no cache should be in place, you can perhaps try to change the contents and see if they updated, if they not, is just cache on your next.js code. The second thing could be the images not being published (and using preview in the playground), but you already mentioned you checked and they are all published.

Join the Discord Contentful community at https://discord.gg/contentful and also place your question there.

Upvotes: 2

therrou
therrou

Reputation: 13

Have you tried passing limit argument to imagesCollection? Not sure why the differences between playground result and your actual query though.

Upvotes: 0

Related Questions