gatsbyjs / gatsby

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

Graphql query works ok locally but causing deploy to fail on Netlify #2568

Closed paweltar closed 7 years ago

paweltar commented 7 years ago

This is my first project using Gatsby and Graphql, so perhaps I just missed something important but I run out of ideas how to fix it.

On my website I'm making a graphql query for multiple images to optimize them with Image Sharp and pass them to Gallery Component - it works when I'm executing 'gatsby build' locally but it's throwing an error on Netlify.

Netlify log looks like this: screen shot on oct 21st at 12-12 pm

index.js page template looks like this: (link to github in case it would be helpful)

import React, { Component } from 'react'
import Link from 'gatsby-link'

import AboutSection from '../components/about-section'
import HeroSection from '../components/hero-section'
import CtaModule from '../components/cta-module'
import ContactSection from '../components/contact-section'
import GallerySection from '../components/gallery-section'

class IndexPage extends Component {
  render() {
    return (
      <div>
        <HeroSection image={this.props.data.heroImage.childImageSharp.sizes} textData={this.props.data.heroData}/>
        <AboutSection image={this.props.data.aboutImage.childImageSharp.sizes}/>
        <GallerySection galleryData={this.props.data.galleryImages.edges}/>
        <CtaModule/>
        <ContactSection/>
      </div>
    )
  }
}

export default IndexPage

export const pageQuery = graphql`
query SampleQuery {
  galleryImages: allImageSharp(filter: {id: {regex: "/home/paweltar/Projekty/Nauka/Gatsby/sitetest/src/static/gallery/"}}) {
    edges {
      node {
        id
        original {
          width
          height
          src
        }
        resolutions(width: 360, height: 300) {
          ...GatsbyImageSharpResolutions
        }
      }
    }
  }
  aboutImage: file(relativePath: { regex: "/wallhaven-348304/"}) {
    childImageSharp {
      sizes(maxWidth: 800) {
        ...GatsbyImageSharpSizes
      }
    }
  }
  heroImage: file(relativePath: { regex: "/bg-about/"}) {
    childImageSharp {
      sizes(maxWidth: 1200) {
        ...GatsbyImageSharpSizes
      }
    }
  }
  heroData: heroJson {
    bigHeader
    description
  }
}
`

package.json: (I switched some packages to 'latest' version in hope this would help but it didn't change anything in this case)

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "latest",
    "gatsby-cli": "latest",
    "gatsby-image": "latest",
    "gatsby-link": "latest",
    "gatsby-plugin-google-fonts": "0.0.3",
    "gatsby-plugin-manifest": "latest",
    "gatsby-plugin-netlify": "^1.0.6",
    "gatsby-plugin-nprogress": "^1.0.7",
    "gatsby-plugin-offline": "^1.0.9",
    "gatsby-plugin-react-helmet": "^1.0.5",
    "gatsby-plugin-sass": "^1.0.12",
    "gatsby-plugin-sharp": "latest",
    "gatsby-remark-images": "^1.5.15",
    "gatsby-source-filesystem": "latest",
    "gatsby-transformer-json": "latest",
    "gatsby-transformer-remark": "^1.7.15",
    "gatsby-transformer-sharp": "latest",
    "jquery": "^3.2.1",
    "leaflet": "^1.2.0",
    "mapbox-gl": "^0.41.0",
    "react-google-maps": "^9.0.1",
    "react-image-palette": "^0.1.2",
    "react-leaflet": "^1.7.1",
    "react-mapbox-gl": "^2.7.0",
    "react-slick": "^0.15.4",
    "slick-carousel": "^1.8.1",
    "uikit": "^3.0.0-beta.30"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.6.1"
  }
}

If I just copy the public folder to some hosting then it works as expected - but if I try to build this on Netlify then this one specific part of graphql query related to gallery component is always empty. It looks like this part of the query is not finished when HTML is generated. Data necessary for other components is returned without problems even during build on Netlify.

brandonmp commented 7 years ago

It looks like the gallery query is pulling from an absolute path, not a relative one. Try changing from /home/paewalter/... to something relative to project root.

paweltar commented 7 years ago

thanks a lot @brandonmp, yes, this was the problem! Of course, there was no path like "/home/paweltar/something/something/" on Netlify, I don't know how I missed it. I'm closing the issue now.