Add support fo Gatsby-image

[decimoseptimo]

Related to gatsbyjs/gatsby#5519

[rezof]

+1

[ialmanzaj]

+2

[vnil]

+3

[gonzochic]

I run into the same problem. But there is a merged pull request #10 which should solve this issue (i think it provids access to the base64 string of the image, but not sure). @pierreburgy do you want to make 0.0.4 Release and deploy a new NPM package? 👍

[dwehrmann]

Can anybody explain how this is working right now? I am struggling with missing images (obviously) when trying to build my strapi-gatsby project.
@gonzochic did you manage to make this work?

[gonzochic]

@dwehrmann I used the master branch of this project (not the NPM package since it is 0.0.3).

Before I start, here a bit of context: I have a Strapi API called "Category" which has a Title (String) and a Thumbnail (Media Type). The Strapi Source Plugin copies the media types into the ./cache folder during development and after build into the /static folder.

You don't need to care about the location since you can query the URL through GraphQL. Here an example query

{
  allStrapiCategory {
    edges {
      node {
        thumbnail {
          publicURL
        }
      }
    }
  }
}

thumbnail is now from type File and you can query all sorts of things. Obviously the next step would be to somehow connect this to gatsby-image in order handle different file sizes more easily. But this is another story.

Hope that helps :)

[krismorf]

@gonzochic I'm using a similar configuration as yours. I moved from strapi to netlify because of the image support. Have a look at how I'm able to query using the script below, and readjust to your needs.

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  const { frontmatter } = node
  if (frontmatter) {
    const { image } = frontmatter
    if (image) {
      if (image.indexOf('/img') === 0) {
        frontmatter.image = path.relative(
          path.dirname(node.fileAbsolutePath),
          path.join(__dirname, '/static/', image)
        )
      }
    }
  }

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

I guess replace MarkdownRemark with StrapiCategory and /img with /.cache.
Then I'm able to query like this:

allMarkdownRemark {
  edges {
    node {
      frontmatter {
        image {
          childImageSharp {
            fluid(maxWidth: 280, maxHeight: 160) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

[dwehrmann]

@gonzochic @kmorf Thank you guys, that looks promising!
@gonzochic for me, nothing from the API is copied, neither to .cache, nor to /static. I cannot even access "publicUrl", just "url" but I now I see the reason is probably I'm using the npm package, my version is 0.0.3. Duh.

[gonzochic]

@dwehrmann fell into the same trap. Thats why I asked @pierreburgy if it is possible to deploy a new package. Maybe another contributer can?

@kmorf: cool. thanks for the kickstart! I'll try it out 👍

[dwehrmann]

@gonzochic Thanks for your help! Are there any changes done to how the queries are made?

Trying to follow your advice, I removed the npm gatsby-source-strapi package and re-installed it via npm install --save https://github.com/strapi/gatsby-source-strapi.git

Now gatsby develop breaks with TypeError: Cannot read property 'allStrapiReferenz' of undefined

Obviously this part in my gatsby-node.js does not work anymore:

const makeRequest = (graphql, request) =>
    new Promise((resolve, reject) => {
        // Query for nodes to use in creating pages.
        resolve(
            graphql(request).then(result => {
                if (result.errors) {
                    reject(result.errors);
                }

                return result;
            })
        );
    });

// Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data.
exports.createPages = ({ boundActionCreators, graphql }) => {
    const { createPage } = boundActionCreators;

    const getPage = makeRequest(
    graphql,
        `
    {
      allStrapiReferenz{
        edges {
          node {
            id
          ...
          }
        }
      },
    ...
    `

"Referenz" is my API. It works with the gatsby-source-strapi version on npm and I cannot see why it should not work with the version from #10

---

Edit: I just looked into the contents of the installed node_module and I guess that was not the correct way of using the current master branch ...

[rezof]

hey guys, here's how am using the github repo to use the latest updates

1. added the dependency as follows:
   "gatsby-source-strapi": "git+https://github.com/rezof/gatsby-source-strapi.git",

2. the project will not be built after npm or yarn install, so am using the install script to automate the build of gatsby-source-strapi after every install

// added the following to package.json
 scripts: {
   ...
   "build:strapi": "cd node_modules/gatsby-source-strapi && npm run build",
   "install": "npm run build:strapi",
}

hope this helps

[dwehrmann]

Amazing, that worked! Thank you, @rezof and @gonzochic ! Now I know what package managers are for. Let's hope that this gets deployed in the npm package asap @pierreburgy @lauriejim

[vasupol11]

hey guys, I have downloaded gatsby-source-strapi plugin from this github master and created a local plugin folder yet i cannot query publicURL as suggested @gonzochic

query ProductListPage {
    allStrapiProducts {
      edges {
        node {
          id
          name
        	img {
          	publicURL
          }
        }
      }
    }
  }

or query childImageSharp

query ProductPage($id: String!) {
    strapiProducts(id: {eq: $id}) {
      name
      producttype
      img{
          childImageSharp {
              fixed(width: 200, height: 125) {
                ...GatsbyImageSharpFixed
              }
            }
      }
    }
  }

GraphQL Error Unknown field childImageSharp on type [img_2]

my configuration is as such

module.exports = {
  siteMetadata: {
    title: 'Kasch Wellness',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'Kasch Wellness',
        short_name: 'Kasch',
        start_url: '/',
        // icon: 'src/static/images/kasch-wellness-favicon.ico', // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-strapi`,
      options: {
       apiURL: `http://localhost:1337`,
       contentTypes: [ // List of the Content Types you want to be able to request from Gatsby.
        `products`
       ]
      }
    },
  ],
  
  
}

[vasupol11]

my image field has allow multiple files checked so it didnt work, after removing that option it works as described. So basically this feature only works with single image field. Is this intended or a bug?

Update: I got it to work with multiple images by following gatsby-source-wordpress example but I have to write more code and it's really rough right now. I have to delete .cache file when it throws internal error

node.internal.type === 'StrapiProducts' just checks my type

Please tell me if the library has a way to work with multiple image field, I'd love to use that instead but for now I guess this will do

path: gatsby-node.js

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 === 'StrapiProducts' ) {
    for ( const image of node.images) {
      const fileNode = await createRemoteFileNode({
        url: "http://localhost:1337" + image.url,
        store,
        cache,
        createNode,
        createNodeId: id => image.id,
      })

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

export const pageQuery = graphql`  
  query ProductListPage {
    allStrapiProducts {
      edges {
        node {
          id
          name
          images{
            localFile{
              publicURL
            }
          }
        }
      }
    }
  }
`