Restore changes to parse arrays of images

[denisgoryaynov]

It seems that the changes form my previous pull request were overwritten by this commit that implemented compatibility with Gatsby Cloud. This pull request is just to restore the files that allowed parsing arrays of images and query them like this

{
  allStrapiArticle {
    edges {
      node {
        id
        singleImage {
         publicURL
        }
        multipleImages {
          localFile {
            publicURL
          }
        }
      }
    }
  }
}

[alexandrebodin]

This wasn't overriden but moved higher in the file. I don't get what your PR is supposed to add

[denisgoryaynov]

@alexandrebodin hi, this PR allows to use the publicURL field on arrays of images. Right now if I do something like this:

query Test {
 allStrapiProject {
    nodes {
      title
      multipleMedia {
        localFile {
          publicURL
        }
      }
      section {
        media {
          localFile {
            publicURL
          }
        }
      }
    }
  }
}

gatsby fails to build because there are no nodes for the images. What this PR does is the same that my last PR did, #90 it allows to query the localFile field when using the Multiple Media type in the strapi admin panel.

Edit: the reason why I opened this PR is that if you check the commit that I linked you can see that it deleted the changes I made to src/normalize.js from my previous pull request

Edit 2: while my solution does the job PR #112 is better and solves the need for using the localFile field, it only has a minor issue but I already commented to let the author know. If that issue gets fixed I hope that the PR gets merged because this is a critical issue for my team and the others that had my same problem.

[alexandrebodin]

Ok, Thank you. I'll check this. The diff is kinda hard to read so will have to test this thouroughly :)

[alexandrebodin]

@denisgoryaynov Can you fix the conflicts in yout PR ?

[denisgoryaynov]

@alexandrebodin yes, I can do it later today

[dsfrederic]

@denisgoryaynov is it possible to use Gatsby-image in combination with multiple files?

[carlaiau]

@denisgoryaynov how is the conflict resolve going? Keep up the great work!

[denisgoryaynov]

@alexandrebodin I fixed the conflicts, sorry if it took me so long

[alexandrebodin]

Actually, this should be an option as the timestamps are configurable per model. (e.g by default on mongo it is camelcased createdAt / updatedAt and on sql databases it would be created_at / updated_at.)

[denisgoryaynov]

Oh I didn't know that, I just changed it because at some point in the code the variable was set as updatedAt but then inside that if the value being used was updated_at which was always undefined for me and I just though that it was an inconsistency. I can try to test it and fix it tomorrow.

[denisgoryaynov]

@alexandrebodin I fixed it with your suggestion but I have a question.
What I did is to create a new variable like this: const itemUpdatedAt = item.updatedAt || item.updated_at, is there a better way to check what database is being used or this method should be fine?

[alexandrebodin]

Hi, This should be fine for now. We will need to fetch model metadata to be more dynamic in the future though :) Will test this weekend se we can release next week ;)

[alexandrebodin]

HI @denisgoryaynov can you just fix the DCO check on this PR plz ? :D

[alexandrebodin]

Can you explain why you use localFile as a key here ? Can't we just have an array of images ?

[denisgoryaynov]

@alexandrebodin I fixed all the issues. I used the localFile key because at the time I didn't know how to do it and that's what other plugins were using (for example gatsby-source-wordpress) and unfortunately I didn't really have much time to take a better look at it and see if it was possible to solve the issue without using the localFile key.

[carlaiau]

Got ya branch working for a current project I'm working on using gatsby-image. Hope it gets pulled in, thanks for the great work!

[peterfortuin]

I have also check out this branch in my current project and it solves my problem with arrays of images. Thanks for the great work.

[peterfortuin]

@denisgoryaynov Is there a way to use your repository/branch into my Gatsby project with yarn instead of the standard gatsby-source-strapi package that is downloaded from npm?

[carlaiau]

You can just yarn add the git directly but you need to fork it to your own and build the package. This is the src for the plugin so does not have the compiled JS that Gatsby is expecting. I forked the git, built the src and committed that and it works fine. Like https://github.com/carlaiau/gatsby-source-strapi

[peterfortuin]

Thanks a lot @carlaiau . This would allow me to continue with my project.

[alexandrebodin]

Hi @denisgoryaynov Thank you again fro your PR,

what I noticed is that using the localeFile key we can get the Strapi image fields (alternativeText, caption...) I feel like we should even do that with single images tbh. This would make the Schema more consistent. Waht do you think ?

[denisgoryaynov]

@alexandrebodin that's a good idea, I recently updated to strapi beta 20 and didn't notice that these fields were missing from single images, I'll take a look a it!

[denisgoryaynov]

@alexandrebodin I updated my code, it should be good now

[ordishc]

Thanks @denisgoryaynov ! Much appreciated :)

[alexandrebodin]

you can remove the precommit it is handled by husky now

[tonoli]

@denisgoryaynov

[denisgoryaynov]

@alexandrebodin @tonoli Sorry for the delay, I was on vacation. I pushed the updated code now

[hashinteractive]

Hey guys,

Any update on this PR as we are still only able to access the thumbnail format for multiple images as a local file in Gatsby. Such as:

As you can see there are no local file options for multiple image formats only the thumbnail format. Also, the docs seem to be off:

{
  allStrapiArticle {
    edges {
      node {
        id
        singleImage {
         publicURL
        }
        multipleImages {
          localFile {
            publicURL
          }
        }
      }
    }
  }
}

As there is no query field localFile for multiple images.

[denisgoryaynov]

@alexandrebodin @tonoli Hi, I fixed the conflict in fetch.js after the latest commit

[hashinteractive]

@denisgoryaynov thanks for your work! I have not tested your PR but does it address creating a local gatsby File for each of the strapi image formats (large, medium and thumbnail) or does it create a whole new field such as

node {
  multipleImages {
    localFile
  }
}

Just curious how your PR implements the fix.

[denisgoryaynov]

@hashinteractive Hi, yes it does create a localFile field for every format

What the code does is to iterate every field recursively and if it finds an image (I test for the "mime" field to detect an image as the original implementation) it generates a localFile node with publicURL and childImageSharp properties

P.S. Thank you, when doing this screenshot I found out that there was a bug when generating images for formats.
My code and the original implementation used this to generate a cache key for every image:
const mediaDataCacheKey = 'strapi-media-${item.id}'
but images inside formats do not have an id field so every key was assigned a value of: strapi-media-undefined, and showed wrong images when generating a localFile node.
Using the hash field fixes the issue:
const mediaDataCacheKey = 'strapi-media-${item.hash}'

[hashinteractive]

@denisgoryaynov thanks for your work and for the explanation. Hopefully we can get the PR merged soon 🙏

[MrChrisRodriguez]

@denisgoryaynov I pulled your fork and when I build it fails because AllStrapiWebsites isn't showing up. When I revert back to origin AllStrapiWebsites appears. Have you tested your latest changes on a vanilla Gatsby-Strapi environment?

[Bubiec]

Will this pull request fix fetching alt text from single images? I would really love to see that merged soon.

[denisgoryaynov]

@MrChrisRodriguez Hi, sorry for the late response but I missed the notification. I tried by setting up a vanilla project using gatsby new frontend and npx create-strapi-app admin and as far as I can tell the build works correctly. Here are the nodes that are generated:

And here is what I added to my package.json:
"gatsby-source-strapi": "git+https://github.com/denisgoryaynov/gatsby-source-strapi.git#build",

I forgot to update to build branch with the latest files from the master branch so that's maybe why you had issues, it should be ok now.

@Bubiec yes it does generate alternativeText for single images, you can see it from the screenshot above

[alexandrebodin]

Hi @denisgoryaynov. I refactored quite a lot of code and integrated changes to support what you have done.
Your code was a huge Help ! thanks a lot.

I released v1.0.0-alpha.0 with the latest changes. please try it out to validate things work for you so we can move release as latest !

[denisgoryaynov]

Hi @alexandrebodin, thank you! I will try the new version as soon as I can!

[DimaMiro]

Hello 👋 How is it going with this PR? @denisgoryaynov
I do need this change in my project 🙂

[alexandrebodin]

Hi @DimaMiro the changes of this PR were integrated in the v1 alpha release v1.0.0-alpha.0. Please try it out and give some feedback so we can move it to stable :)

[DimaMiro]

Hi @DimaMiro the changes of this PR were integrated in the v1 alpha release v1.0.0-alpha.0. Please try it out and give some feedback so we can move it to stable :)

Hi @alexandrebodin 👋 I've tried this change in alpha and it works correctly. Thank you 🙌

[strapi-cla]

All committers have signed the CLA.

[visuvelu]

Hi, how is it going with PR? @denisgoryaynov @alexandrebodin I need this change in my projects.

[alexandrebodin]

@visuvelu if you check the comments above you will see we made the fix in the alpha version but not many people have tester it so far so I'm holding off the release. You can use it as it fixes a lot of the current issues

[Arahis]

Worked great for me. Thanks a lot!

[alexandrebodin]

Hi, We just released the v1.0.0 fixing including this requested changes :)