gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

Sourcing Gatsby-Image Files in gatsby-node during onCreatePage #10195

Closed brohlson closed 5 years ago

brohlson commented 5 years ago

Summary

I'm sourcing data from Airtable. When I export a page query, or a static query into a component, I'm able to transform Image nodes into usable props for gatsby-image, like so:

export const fleetQuery = graphql
  query {
    allAirtable(filter: { table: { eq: "Fleets" } }) {
      edges {
        node {
          data {
            icon {
              localFiles {
                childImageSharp {
                  fixed(width: 55, height: 55) {
                    ...GatsbyImageSharpFixed_tracedSVG
                  }
                }
              }
            }
          }
        }
      }
    }
  }

Now, I'm trying to generate some pages in gatsby-node.js based on the same table, using the same data. I'd like to offer the image data as pageContext to my generated pages, but I'm running into an error in the process. onCreatePage does not recognize this method of transforming the image node. My function:

exports.createPages = ({ graphql, actions }) => {
  const { createPage, createRedirect } = actions

  return new Promise((resolve, reject) => {
    const pages = []
    const fleetTemp = path.resolve(`src/templates/FleetTemplate.js`)

    resolve(
      graphql(
        `
          {
            allAirtable(filter: { table: { eq: "Fleets" } }) {
              edges {
                node {
                  id
                  data {
                    name
                    slug
                     icon {
                     localFiles {
                      childImageSharp {
                        fixed(width: 55, height: 55) {
                      ...GatsbyImageSharpFixed_tracedSVG
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          result.errors.forEach(error => {
            console.log(error)
          })

          reject(result.errors)
        } ...... ETC.

The error comes back as: GraphQLError: Cannot query field "GatsbyImageSharpFixed_tracedSVG" on type "ImageSharpFixed"

So, to me it seems like this isn't the right place for this transform to go. Is there something I'm missing here? I'm guessing this is because these images haven't been made 'local files' before this query runs, but can't seem to find many relevant issues that address this.

Thanks!

Environment

System: OS: macOS 10.14.1 CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 8.11.3 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 5.6.0 - /usr/local/bin/npm Browsers: Chrome: 70.0.3538.110 Firefox: 63.0.3 Safari: 12.0.1 npmPackages: gatsby: ^2.0.19 => 2.0.54 gatsby-image: ^2.0.15 => 2.0.20 gatsby-plugin-manifest: ^2.0.5 => 2.0.9 gatsby-plugin-offline: ^2.0.11 => 2.0.16 gatsby-plugin-react-helmet: ^3.0.0 => 3.0.2 gatsby-plugin-sharp: ^2.0.7 => 2.0.13 gatsby-plugin-styled-components: ^3.0.3 => 3.0.3 gatsby-source-airtable: ^2.0.2 => 2.0.2 gatsby-source-filesystem: ^2.0.4 => 2.0.8 gatsby-transformer-sharp: ^2.1.4 => 2.1.8 npmGlobalPackages: gatsby-cli: 2.4.5

LekoArts commented 5 years ago

Hi! I think the error means that you cannot use the GraphQL fragment in gatsby-node.

You have two options:

  1. Write out the fragment by hand (have a look at the „gatsby-plugin-sharp“ docs, the fragment is a shorthand)

  2. Pass something unique from this query (maybe the slug?) as context and query in the template with this unique identifier as filter. There you also can use the fragment again.

Option 2 is recommended by the docs

PieterT2000 commented 4 years ago

Please see this repo for the written-out fragments used with Gatsby Image, so you can just copy them to your gatsby-node.js file.

Geerodge commented 3 years ago

Please see this repo for the written-out fragments used with Gatsby Image, so you can just copy them to your gatsby-node.js file.

Thanks for the link to the full queries, very helpful.