Querying multiple image from strapi with graphql and gatsby

Question

I'm trying to map out some images into image galleries. There is supposed to be multiple images for each ID but only 1 is returned in graphIQL.

I found this related thread but i cant work out what i should put in my gatsby node file. Any help would be much appreciated

graphIQL -

Answer 1

As I suggested in the other answer if the loop is printing the same image, internally the id is not properly set from Strapi. You can customize the GraphQL node schema to add custom parameters in order to bypass this limitation using different APIs provided by Gatsby, createRemoteFileNode should fit your requirements.

const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

exports.onCreateNode = async ({ node, actions, store, cache }) => {
  const { createNode, createNodeField } = actions;

  if (node.internal.type !== null && node.internal.type === "StrapiPortfolio") {
    for (const category of node.category) {
      for (const image of category.images) {
        console.log(image);
        const fileNode = await createRemoteFileNode({
          url: "http://localhost:1337" + image.url,
          store,
          cache,
          createNode,
          createNodeId: (id) => image.id.toString(),
        });

        if (fileNode) {
          image.localFile___NODE = fileNode.id;
        }
      }
    }
  }
};

Depending on your data structure, you may need to change the loop, in this case, images are inside a category node so, it has to be inferred by nesting two different loops.

The idea is to loop through all your image nodes and add the localFile___NODE field with:

  image.localFile___NODE = fileNode.id;

The id is previously created in:

  createNodeId: (id) => image.id.toString(),