Gatsby Image - Unknown fragment ... #20984

Coriou · 2020-01-29T10:47:10Z

Description

This morning I navigated to a Gatsby project of mine which has been in production for a year, fully functional. I launch a gatsby develop command and I'm getting an Unknown fragment "GatsbyImageSharpFluid_noBase64" error even though it worked for months and I haven't changed anything...

I've tried reinstalling all my dependencies, double checked everything, searched for help online but this issue really puzzles me as, and I can't stress this enough, nothing has changed since the last time it worked as expected.

I've checked the changelogs of the related packages (which I haven't updated, but I checked anyway) but no mentions as to why this would happen. Nobody seems to be experiencing the issue (or I couldn't find reports like mine).

What I've tried:

Deleted node_modules, yarn.lock & .cache files & directories, reinstalled everything normally (ie yarn install)
Tried against different branches of the project, all of which were building fine just yesterday and I'm getting this issue on all of them
Checked gatsby-transformer-sharp fragments fails GraphQL - Unknown Types #15625, gatsby-transformer-sharp or gatsby-theme-blog doesnt seem to work well with yarn workspaces #16142 and other somewhat related reports elsewhere which didn't help
Updating all my dependencies
Removing the GatsbyImageSharpFluid_noBase64 from the query below, which allows me to build the site just fine but, as you'd expect, I'm relying on this fragment so it's far from ideal

What's really strange:

I haven't changed anything on the project nor the environment since it was working
All my latest changes do not directly have anything to do with this part of the site
I haven't installed new Gatsby plugins or anything

I appreciate the fact that this report is somewhat strange, but I'm here looking for guidance or ideas as to why this could possibly happen and I'll investigate. Hopefully I'm just missing something super obvious someone will pick up.

The failing query

fragment transform_transparent on File {
	childImageSharp {
		sqip(numberOfPrimitives: 12, blur: 5, width: 316) {
			dataURI
		}
		fluid(maxHeight: 316, maxWidth: 316, quality: 85, toFormat: PNG) {
			...GatsbyImageSharpFluid_noBase64
		}
	}
}

The above custom fragment is the one reported to fail, however I use the GatsbyImageSharpFluid_noBase64 fragment elsewhere and that doesn't seem to cause an issue.

The images I apply this fragment on come from Prismic.io using the gatsby-source-prismic plugin.

Current workaround

I can build and use the site as expected if I drop the dependency to the incriminated fragment (GatsbyImageSharpFluid_noBase64) and replacing it with GatsbyImageSharpFluid_tracedSVG. I've tried using GatsbyImageSharpFluid too, but I'm getting the same error "unknown fragment".

Environment

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v12.13.0/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 71.0
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.18.17 => 2.19.8 
    gatsby-image: ^2.2.37 => 2.2.39 
    gatsby-link: ^2.2.27 => 2.2.28 
    gatsby-plugin-gtag: ^1.0.12 => 1.0.12 
    gatsby-plugin-mailchimp: ^5.1.2 => 5.1.2 
    gatsby-plugin-manifest: ^2.2.34 => 2.2.39 
    gatsby-plugin-offline: ^3.0.30 => 3.0.32 
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.21 
    gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-remove-trailing-slashes: ^2.1.17 => 2.1.20 
    gatsby-plugin-sass: ^2.1.26 => 2.1.27 
    gatsby-plugin-sharp: ^2.3.10 => 2.4.3 
    gatsby-plugin-sitemap: ^2.2.24 => 2.2.26 
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 
    gatsby-source-filesystem: ^2.1.43 => 2.1.46 
    gatsby-source-prismic: ^2.2.0 => 2.2.0 
    gatsby-transformer-remark: ^2.6.45 => 2.6.48 
    gatsby-transformer-sharp: ^2.3.9 => 2.3.13 
    gatsby-transformer-sqip: 2.1.55 => 2.1.55

The text was updated successfully, but these errors were encountered:

disintegrator · 2020-01-29T12:25:57Z

We are seeing a similar issue using fragments from gatsby-source-contentful

There was an error in your GraphQL query:

Unknown fragment "GatsbyContentfulFluid".

GraphQL request:34:14
33 |         fluid(maxWidth: 380) {
34 |           ...GatsbyContentfulFluid
   |              ^
35 |         }

Environment

 System:
   OS: macOS Mojave 10.14.6
   CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
   Shell: 5.7.1 - /usr/local/bin/zsh
 Binaries:
   Node: 12.14.1 - /var/folders/11/zcvk9j4j7rd_dj0t5hcv9wc80000gp/T/yarn--1580300247469-0.39354179605509243/node
   Yarn: 1.21.1 - /var/folders/11/zcvk9j4j7rd_dj0t5hcv9wc80000gp/T/yarn--1580300247469-0.39354179605509243/yarn
   npm: 6.13.4 - /usr/local/bin/npm
 Browsers:
   Chrome: 79.0.3945.130
   Firefox: 72.0.2
   Safari: 13.0.5
 npmPackages:
   gatsby: ^2.19.8 => 2.19.8
   gatsby-cli: ^2.8.27 => 2.8.27
   gatsby-image: ^2.2.39 => 2.2.39
   gatsby-plugin-catch-links: ^2.1.24 => 2.1.24
   gatsby-plugin-feed: ^2.3.26 => 2.3.26
   gatsby-plugin-manifest: ^2.2.39 => 2.2.39
   gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
   gatsby-plugin-schema-snapshot: ^1.0.0 => 1.0.0
   gatsby-plugin-sharp: ^2.4.3 => 2.4.3
   gatsby-plugin-sitemap: ^2.2.26 => 2.2.26
   gatsby-plugin-svgr: ^2.0.2 => 2.0.2
   gatsby-plugin-typescript: ^2.1.26 => 2.1.26
   gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5
   gatsby-remark-prismjs: ^3.3.30 => 3.3.30
   gatsby-source-contentful: ^2.1.82 => 2.1.82
   gatsby-source-filesystem: ^2.1.46 => 2.1.46
   gatsby-transformer-remark: ^2.6.48 => 2.6.48
   gatsby-transformer-sharp: ^2.3.13 => 2.3.13
   react: ^16.12.0 => 16.12.0
   react-dom: ^16.12.0 => 16.12.0
   typescript: ^3.7.5 => 3.7.5

vladar · 2020-01-29T16:18:15Z

Can you please upgrade to gatsby@2.19.9 to check if it still happening for you? If it doesn't help - try gatsby@2.19.7 (and maybe bisect to figure out which version of gatsby broke it)

Coriou · 2020-01-29T16:55:52Z

@vladar Thanks for your input.

I've tested, without success the following Gatsby versions:

2.19.10
2.19.9
2.19.8
2.19.7
2.19.6

However, I have a local, a staging and a production site which all built just fine with the exact same code base on 2.19.8 a couple of weeks or so ago and when I got back at it earlier today (still on 2.19.8) I got the error I'm reporting here.

vladar · 2020-01-29T17:59:11Z

This sounds very weird.

I'd very much appreciate if you could provide a minimal reproduction. Or if you have a private project - you can invite me there and I will check. It is hard to help without some code to look at.

tmilewski · 2020-01-29T19:26:37Z

@vladar I'm running into what I believe to be a similar issue. That said, I'm receiving it on other fragments that I've created, as seen below. I'll work to get more information.

Versions:

Known Working Gatsby Versions:

2.17.0
2.19.0
2.19.5
2.19.7

Known Failing Gatsby Versions:

2.19.8
2.19.9
2.19.10

2.19.8 Changelog:

Bug Fixes

gatsby: Fix stack overflow on queries with circular fragments (fix(gatsby): Fix stack overflow on queries with circular fragments #20936) (094ca4c)
gatsby: remove role alert on gatsby-announcer (fix(gatsby): remove role alert on gatsby-announcer #20914) (0008bc4)
gatsby: structured error might be a string (fix(gatsby): structured error might be a string #20909) (7e40b21)

Performance Improvements

gatsby: Create index on the fly for non-id index (perf(gatsby): Create index on the fly for non-id index #20729) (115d5c4)

Following The Issue:

`yarn build` log

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "fragmentPerson".

GraphQL request:18:10
17 |     author {
18 |       ...fragmentPerson
   |          ^
19 |     }

File: src/templates/blog.js:83:10

src/templates/blog.js [lines 66-96]

(Interesting to note here that ...fragmentBlogPost works earlier in the query vs later.)

export const query = graphql`
  query ($id: String!) {
    page: contentfulFeaturedBlogs(id: {eq: $id}) {
      id
      name
      headerBlog {
        ...fragmentBlogPost
      }
      headerTint
      headerHeight
      headerImage {
        title
        description
        file {
          url
        }
      }
      sections {
        id
        type
        bgColor
        header
        content {
          ...fragmentBlogPost
          ...fragmentBlogTag
          ...fragmentfullWidthCTA
        }
      }
    }
  }
`

src/data/fragments.js [lines 363-399]

export const fragmentBlogPost = graphql`
  fragment fragmentBlogPost on ContentfulBlogPost {
    id
    slug
    title
    hideFromSearchEngines
    image {
      title
      description
      file {
        url
      }
    }
    imageTint
    metaDescription
    publishedAt(formatString: "MMMM DD, YYYY")
    author {
      ...fragmentPerson
    }
    campus {
      ...fragmentCampus
    }
    blogTags: tags {
      ... on ContentfulTag {
        ...fragmentBlogTag
      }
    }
    blogContent: content {
      ... on contentfulBlogPostContentRichTextNode {
        json
      }
    }
    fullWidthCta {
      ...fragmentfullWidthCTA
    }
  }
`

src/data/fragments.js [lines 62-83]

export const fragmentPerson = graphql`
  fragment fragmentPerson on ContentfulPerson {
    id
    name
    slug
    hideFromSearchEngines
    headshot {
      title
      description
      file {
        url
      }
    }
    jobTitle
    biography {
      json
    }
    twitter
    linkedIn
    github
  }
`

Coriou · 2020-01-30T12:00:03Z

This sounds very weird.

I'd very much appreciate if you could provide a minimal reproduction. Or if you have a private project - you can invite me there and I will check. It is hard to help without some code to look at.

How can I reach out ?

jokokoloko · 2020-01-30T16:11:40Z

I am also getting the same/similar error as @tmilewski but some additional weirdness is that it happens while editing seemingly unrelated code (such as removing a className from an element and then saving) and having the hot-module-loader automatically refresh my browser. Either making another change to my code and then saving or running "gatsby develop" rebuilds the site/app correctly without any errors.

I have also gotten this error with the same Gatsby project hosted on Netlify and manually triggering another deploy right after also built the site/app correctly without any errors.

The error I get:

ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "imageFigure".

GraphQL request:7:16
6 |         image {
7 |             ...imageFigure
  |                ^
8 |         }

File: src/pages/index.js:190:16


ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "imageFigure".

GraphQL request:7:16
6 |         image {
7 |             ...imageFigure
  |                ^
8 |         }

File: src/pages/index.js:190:16


ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "imageFigure".

GraphQL request:15:16
14 |         figure {
15 |             ...imageFigure
   |                ^
16 |         }

File: src/pages/index.js:198:16

failed extract queries from components - 0.167s

This above is all one error message.

sidharthachatterjee · 2020-01-31T12:26:41Z

We've published a canary of a potential fix for this issue in gatsby@2.19.11-issue-20984

Please try it out and let us know if it fixes it for you! 🙌

Coriou · 2020-01-31T13:51:04Z

@sidharthachatterjee I can confirm that the fix published in gatsby@2.19.11-issue-20984 works for me. The site builds just fine with the code I posted previously as is.

Thank you team for such a quick response and resolution !

afladmark · 2020-01-31T14:38:52Z

I am experiencing this issue as well, getting the error:

There was an error in your GraphQL query:

Unknown fragment "GatsbyContentfulFluid_withWebp_noBase64".

GraphQL request:25:16
24 |           fluid {
25 |             ...GatsbyContentfulFluid_withWebp_noBase64
   |                ^
26 |           }

I can confirm that using the fix in gatsby@2.19.11-issue-20984 I am still experiencing the issue, unfortunately.

The one difference that stands out to me in the case of where it's still occuring is that the fragments are nested within other fragments. I.e. I have an ...Asset fragment used in a page query which contains the above ...GatsbyContentfulFluid_withWebp_noBase64 reference.

sidharthachatterjee · 2020-01-31T14:54:36Z

@afladmark Interesting. Do you happen to have a minimal reproduction of this? It'll help us knock out edge cases and get this fix shipped.

tmilewski · 2020-01-31T15:09:15Z

@sidharthachatterjee This looks to work for me! Thank you for the fast fix!

@afladmark Did you rm -rf .cache public? I was running into the same issue with the new build until I cleared everything out.

tmilewski · 2020-01-31T15:18:01Z

So, this is super odd. I spoke too soon.

Installed the canary.
Built, didn't work.
Ran rm -rf .cache public
Built, worked.
Built a second time, didn't work.
Now it's continuously not working, with the same issue.

› rm -rf .cache public; yarn build
yarn run v1.17.3
$ gatsby build
success open and validate gatsby-configs - 0.079s
success load plugins - 0.329s
success onPreInit - 0.010s
success delete html and css files from previous builds - 0.012s
success initialize cache - 0.012s
success copy gatsby files - 0.038s
success onPreBootstrap - 0.006s
success createSchemaCustomization - 0.005s
Starting to fetch data from Contentful
Fetching default locale
default locale is : en-US
contentTypes fetched 33
Updated entries  3495
Deleted entries  0
Updated assets  3540
Deleted assets  0
Fetch Contentful data: 4729.891ms
success source and transform nodes - 8.980s
warn Deprecation warning - adding inferred resolver for field ContentfulTuition.payUpfrontCtaForm. In Gatsby v3, only fields with an explicit
warn Deprecation warning - adding inferred resolver for field ContentfulSection.ctaForm. In Gatsby v3, only fields with an explicit
warn Deprecation warning - adding inferred resolver for field ContentfulSection.bgImage. In Gatsby v3, only fields with an explicit
warn Deprecation warning - adding inferred resolver for field ContentfulCohort.location. In Gatsby v3, only fields with an explicit
success building schema - 2.790s
success createPages - 2.873s
success createPagesStatefully - 0.074s
success onPreExtractQueries - 0.002s
success update schema - 0.404s

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "fragmentPerson".

GraphQL request:18:10
17 |     author {
18 |       ...fragmentPerson
   |          ^
19 |     }

File: src/templates/blog-campus.js:65:10


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "fragmentPerson".

GraphQL request:18:10
17 |     author {
18 |       ...fragmentPerson
   |          ^
19 |     }

File: src/templates/blog-tag.js:57:10


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "fragmentPerson".

GraphQL request:18:10
17 |     author {
18 |       ...fragmentPerson
   |          ^
19 |     }

File: src/templates/blog.js:83:10

failed extract queries from components - 0.587s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

afladmark · 2020-01-31T15:40:47Z

As we source our data from a Contentful account, I'm not sure how best to provide you a minimal reproduction. I can provide some insight into the queries we're using as a starting point. In the page template we have a page query:

export const query = graphql`
  query CountryQuery($contentful_id: String!, $locale: String!) {
    contentfulCountry(contentful_id: { eq: $contentful_id }, node_locale: { eq: $locale }) {
      heading
      title
      description {
        description
      }
      content {
        childMarkdownRemark {
          html
        }
      }
    }
    allContentfulAsset(filter: { contentful_id: { eq: "1SBAKQ9lRqO49cO632ZpX8" }, node_locale: { eq: $locale } }) {
      ...Asset
    }
  }
`

And then the Asset fragment is defined as:

export const assetFragment = graphql`
  fragment Asset on ContentfulAssetConnection {
    edges {
      node {
        id
        contentful_id
        node_locale
        file {
          url
        }
        fixed {
          ...GatsbyContentfulFixed_withWebp_noBase64
        }
        fluid {
          ...GatsbyContentfulFluid_withWebp_noBase64
        }
      }
    }
  }
`

If I replace both usages of the ...Asset fragment with the identical graphql query inline the build then completes successfully.

I then reverted to 2.19.10 and did rm -rf .cache public node_modules && npm install && npm run build and actually I can build successfully there too now without that Asset fragment.

The only thing I can't as yet explain is that I have other fragments very much like this one which are in use and are not causing this issue. :-(

I may be able to provide access to the repo, privately. Or if you can suggest how best to approach replicating the Contentful setup in a minimal reproduction I can have a go at it.

afladmark · 2020-01-31T15:44:29Z

Hmm. The only different between the Asset fragment and the other similar ones is that it's a fragment based on ContentfulAssetConnection and the rest are ContentfulAsset fragments.

Further hmmmm.... It's only two usages of the ...Asset frag that cause the issue. It's in another 4 page queries and it works fine being left in those. On either version.

pieh · 2020-01-31T17:09:46Z

The hot-fix we came up is indeed not reliable - it worked for reproduction we had, but this was probably incidental :(

We still need reproductions here folks! Specifically ones that still fail after trying test gatsby version that @sidharthachatterjee posted

epgui · 2020-02-01T00:04:49Z

Updating gatsby from 2.19.7 to 2.19.10 broke our GraphQL fragments as well.

vladar · 2020-02-01T20:14:01Z

The bug was in fragment cycle detection (in an edge case when the same fragment was referenced multiple times within one query and then also referenced in another query).

The caveat though is that the error was reported on the next fragment usage in another query (sometimes seemingly innocent). That's why it was so hard to reproduce.

#21128 should fix it (hopefully)

@Coriou thanks a lot for repro access!

sidharthachatterjee · 2020-02-01T20:52:51Z

Thanks to @vladar this was fixed in gatsby@2.19.11

Thank you everyone!

vladar · 2020-02-01T21:07:28Z

Hopefully fixed 😅 At least should be fixed for the original issue description (as I was able to test on this repo).

But if someone encounters a similar error, please open a new issue with your details (and ideally - reproduction)

tmilewski · 2020-02-02T00:34:59Z

Thank you so much for quickly attacking this! I can 100% confirm that gatsby@2.19.11 fixed my issue.

afladmark · 2020-02-02T01:14:48Z

Also confirmed. Everything is building fine again. Thank you very much for the fix!

axe312ger · 2020-03-09T15:24:59Z

I run into this and now could fix the issue.

It was either one of these:

forgot gatsby-plugin-sharpgatsby-transformer-sharp fragments fails GraphQL - Unknown Types #15625 (comment)
or more likely: two static queries had the same query name

xmflsct · 2020-03-12T21:03:10Z

I can confirm about @axe312ger that no two static queries should have the same name.

Glinkis · 2020-05-14T12:31:35Z

I'm encountering this same issue.

failed We've encountered an error: Objects are not valid as a React 
child (found: GraphQLDocumentError: GraphQLDocumentError: Unknown   
fragment "GatsbyContentfulFixed".). If you meant to render a        
collection of children, use an array instead.

Coriou · 2020-05-14T12:36:59Z

@Glinkis Probably not the same issue actually. Check #15397 and #16455 (duped)

Seems like cleaning cache & reinstalling some related modules might suffice or you need to add at least one image to Contenful (I just read the issues real quick, I could be wrong).

Glinkis · 2020-05-14T13:26:19Z

@carlaiau Hmm, I don't think it's that issue. I have images in Contentful, have cleared my cache and reinstalled the dependencies multiple times to no avail.

dulcetti · 2020-05-21T18:08:39Z

Hi guys. I have the same problems. I tried to use version 2.19.11 and 2.19.11-issue-20984, but not worked.

I put the following code on my gatsby-node.js:

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);
const { fmImagesToRelative } = require(`gatsby-remark-relative-images`);

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

  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({
      node,
      getNode,
      basePath: `pages`,
    });

    createNodeField({
      name: `slug`,
      node,
      value: `/${slug.slice(12)}`,
    });
  }
};

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

  return graphql(`
    {
      allMarkdownRemark(sort: { order: DESC, fields: frontmatter___date }) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              category
              date(locale: "pt-br", formatString: "DD[/]MM[/]YYYY")
              description
              featuredImage {
                childImageSharp {
                  fluid(maxWidth: 960) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
              title
            }
            timeToRead
          }
        }
      }
    }
  `).then((result) => {
    const posts = result.data.allMarkdownRemark.edges;

    // Create posts
    posts.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve('./src/templates/blog-post/index.js'),
        context: {
          slug: node.fields.slug,
        },
      });
    });
  });
};

Before I put the code const { fmImagesToRelative } = require(gatsby-remark-relative-images); and fmImagesToRelative(node);, the console showed the error:

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

Field "featuredImage" must not have a selection since type "String" has no subfields.

This can happen if you e.g. accidentally added { } to the field "featuredImage". If you didn't expect "featuredImage" to be of type "String" make sure that your input source and/or plugin is correct.

File: gatsby-node.js:26:10

Now, after I put both code lines, the console returns the following error:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "GatsbyImageSharpFluid".

File: gatsby-node.js:28:10

My dependencies on package.json:

{
  "dependencies": {
    "@commitlint/cli": "^8.3.5",
    "@commitlint/config-conventional": "^8.3.4",
    "algoliasearch": "^4.2.0",
    "babel-jest": "^26.0.1",
    "babel-plugin-styled-components": "^1.10.7",
    "commitizen": "^4.1.2",
    "cz-conventional-changelog": "^3.2.0",
    "dotenv": "^8.2.0",
    "gatsby-image": "^2.4.4",
    "gatsby-plugin-algolia-search": "0.5.7",
    "gatsby-plugin-manifest": "^2.4.6",
    "gatsby-plugin-offline": "^3.2.4",
    "gatsby-plugin-react-helmet": "^3.3.1",
    "gatsby-plugin-sharp": "^2.6.6",
    "gatsby-plugin-sitemap": "^2.4.2",
    "gatsby-plugin-styled-components": "^3.3.1",
    "gatsby-plugin-transition-link": "^1.18.0",
    "gatsby-remark-images": "^3.3.5",
    "gatsby-remark-lazy-load": "^1.0.2",
    "gatsby-remark-prismjs": "^3.5.1",
    "gatsby-remark-relative-images": "^0.2.3",
    "gatsby-source-filesystem": "^2.3.5",
    "gatsby-transformer-remark": "^2.8.10",
    "gatsby-transformer-sharp": "^2.5.2",
    "gatsby": "^2.22.0",
    "gsap": "^3.2.6",
    "husky": "^4.2.5",
    "jest": "^26.0.1",
    "lazysizes": "^5.2.0",
    "prismjs": "^1.20.0",
    "prop-types": "^15.7.2",
    "react-disqus-comments": "^1.4.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0",
    "react-instantsearch-dom": "^6.5.0",
    "react": "^16.12.0",
    "styled-components": "^5.1.0",
    "styled-media-query": "^2.1.2"
  },
  "devDependencies": {
    "prettier": "2.0.5"
  },
}

I want to use the featuredImage with gatsby-image inside the post list and the full post, but the .md file returns the image like string, so, I need to get the childImageSharp with graphql.

I will use the Netlify CMS, but not now. My code is here https://github.com/dulcetti/blog and the pre-production preview is here https://brunodulcetti.netlify.app/

Does somebody help?

Ah, I forgot, the branch of my tests is feature/featured-images

Regards.

dulcetti · 2020-05-21T18:40:51Z

Well, I solved the case, forgot my previous comment ;)

xabierlameiro · 2020-05-21T19:49:33Z

@dulcetti ,how did you do it?
I try multiple gatsby version and nothing, remove .cache, node_modules, cleans, installs and the same error :

VipsJpeg: Premature end of JPEG file
VipsJpeg: Premature end of JPEG file
VipsJpeg: out of order read at line 688
VipsJpeg: out of order read at line 736

 10 | fragment GatsbyContentfulFluid_tracedSVG on ContentfulFluid {
> 11 |   tracedSVG
     |   ^
  12 |   aspectRatio
  13 |   src
  14 |   srcSet
  15 |   sizes
  16 | }

I use gatsby develop, then it executes an error for each entry but the project works, the bad thing that gatsby build doesn't

gatsby build

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

VipsJpeg: Premature end of JPEG file
VipsJpeg: out of order read at line 128
...
Plugin: none
not finished run queries - 18.415s

it's frustrating, cheers!!

dulcetti · 2020-05-22T13:41:19Z

@XabierL Hi. Well, my problem is because I don't know so much the graphql, so, when the post without a filled featured image, with an empty string, show an error.

Some me files have this featuredImage: '/assets/images/bgs/backend.jpg', but others had featuredImage: ''

My query on gatby-node.js is:

graphql(`
  {
    allMarkdownRemark(sort: { order: DESC, fields: frontmatter___date }) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            category
            date(locale: "pt-br", formatString: "DD[/]MM[/]YYYY")
            title
          }
          timeToRead
        }
      }
    }
  }
`

Before, I put the featuredImage on the query, but not work. The filed featuredImage I put only on the query of posts, inside the 'blog-posts.js` file:

export const postQuery = graphql`
  query Post($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      fields {
        slug
      }
      frontmatter {
        category
        date(locale: "pt-br", formatString: "DD[/]MM[/]YYYY")
        description
        featuredImage {
          childImageSharp {
            fluid(maxHeight: 622, maxWidth: 960) {
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
      }
      timeToRead
      html
    }
  }
`;

Well, I don't use the Contentful, I will use the Netlify CMS.

One detail, I put the following code on the gatsby-node.js file:

const { fmImagesToRelative } = require(`gatsby-remark-relative-images`); // <== this line

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  fmImagesToRelative(node); // <== this line

  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({
      node,
      getNode,
      basePath: `pages`,
    });

    createNodeField({
      name: `slug`,
      node,
      value: `/${slug.slice(12)}`,
    });
  }
};

Off Course, my gatsby-node.js file has more codes, but these lines is most important to understand. The line fmImagesToRelative(node); "transform" the image string in "object" to gatsby=image.

Regards

SOHELAHMED7 · 2020-12-04T14:12:07Z

I solved this issue by ensuring all GraphQL query name is unique.

I was having two exactly same query in different files and I was getting this (Issue description) error

        query blogListQuery {
  allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}, filter: {frontmatter: {template: {eq: "blog-post"}}}) {
    edges {
      node {
...

I renamed second query for e.g. to

        query blogListQuery88888 {
  allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}, filter: {frontmatter: {template: {eq: "blog-post"}}}) {
    edges {
      node {
...

And the issue is solved for me.

pieh added the topic: GraphQL Related to Gatsby's GraphQL layer label Jan 29, 2020

vladar self-assigned this Jan 29, 2020

vladar added the type: bug An issue or pull request relating to a bug in Gatsby label Jan 29, 2020

vladar added the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Jan 29, 2020

sidharthachatterjee mentioned this issue Jan 31, 2020

fix(gatsby): Fix missing fragment definition #21081

Closed

sidharthachatterjee added status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. and removed status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. labels Jan 31, 2020

vladar mentioned this issue Feb 1, 2020

fix(gatsby): Fix invalid algorithm of fragment cycles detection #21128

Merged

sidharthachatterjee removed the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Feb 1, 2020

gatsbybot closed this as completed in #21128 Feb 1, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gatsby Image - Unknown fragment ... #20984

Gatsby Image - Unknown fragment ... #20984

Coriou commented Jan 29, 2020 •

edited

Loading

disintegrator commented Jan 29, 2020

vladar commented Jan 29, 2020 •

edited

Loading

Coriou commented Jan 29, 2020

vladar commented Jan 29, 2020

tmilewski commented Jan 29, 2020 •

edited

Loading

Coriou commented Jan 30, 2020

jokokoloko commented Jan 30, 2020 •

edited

Loading

sidharthachatterjee commented Jan 31, 2020

Coriou commented Jan 31, 2020

afladmark commented Jan 31, 2020

sidharthachatterjee commented Jan 31, 2020

tmilewski commented Jan 31, 2020

tmilewski commented Jan 31, 2020 •

edited

Loading

afladmark commented Jan 31, 2020

afladmark commented Jan 31, 2020 •

edited

Loading

pieh commented Jan 31, 2020

epgui commented Feb 1, 2020

vladar commented Feb 1, 2020

sidharthachatterjee commented Feb 1, 2020

vladar commented Feb 1, 2020

tmilewski commented Feb 2, 2020

afladmark commented Feb 2, 2020

axe312ger commented Mar 9, 2020

xmflsct commented Mar 12, 2020

Glinkis commented May 14, 2020

Coriou commented May 14, 2020 •

edited

Loading

Glinkis commented May 14, 2020 •

edited

Loading

dulcetti commented May 21, 2020 •

edited

Loading

dulcetti commented May 21, 2020 •

edited

Loading

xabierlameiro commented May 21, 2020

dulcetti commented May 22, 2020

SOHELAHMED7 commented Dec 4, 2020

Gatsby Image - Unknown fragment ... #20984

Gatsby Image - Unknown fragment ... #20984

Comments

Coriou commented Jan 29, 2020 • edited Loading

Description

The failing query

Current workaround

Environment

disintegrator commented Jan 29, 2020

Environment

vladar commented Jan 29, 2020 • edited Loading

Coriou commented Jan 29, 2020

vladar commented Jan 29, 2020

tmilewski commented Jan 29, 2020 • edited Loading

Versions:

Known Working Gatsby Versions:

Known Failing Gatsby Versions:

2.19.8 Changelog:

Bug Fixes

Performance Improvements

Following The Issue:

yarn build log

src/templates/blog.js [lines 66-96]

src/data/fragments.js [lines 363-399]

src/data/fragments.js [lines 62-83]

Coriou commented Jan 30, 2020

jokokoloko commented Jan 30, 2020 • edited Loading

sidharthachatterjee commented Jan 31, 2020

Coriou commented Jan 31, 2020

afladmark commented Jan 31, 2020

sidharthachatterjee commented Jan 31, 2020

tmilewski commented Jan 31, 2020

tmilewski commented Jan 31, 2020 • edited Loading

afladmark commented Jan 31, 2020

afladmark commented Jan 31, 2020 • edited Loading

pieh commented Jan 31, 2020

epgui commented Feb 1, 2020

vladar commented Feb 1, 2020

sidharthachatterjee commented Feb 1, 2020

vladar commented Feb 1, 2020

tmilewski commented Feb 2, 2020

afladmark commented Feb 2, 2020

axe312ger commented Mar 9, 2020

xmflsct commented Mar 12, 2020

Glinkis commented May 14, 2020

Coriou commented May 14, 2020 • edited Loading

Glinkis commented May 14, 2020 • edited Loading

dulcetti commented May 21, 2020 • edited Loading

dulcetti commented May 21, 2020 • edited Loading

xabierlameiro commented May 21, 2020

dulcetti commented May 22, 2020

SOHELAHMED7 commented Dec 4, 2020

Coriou commented Jan 29, 2020 •

edited

Loading

vladar commented Jan 29, 2020 •

edited

Loading

tmilewski commented Jan 29, 2020 •

edited

Loading

`yarn build` log

jokokoloko commented Jan 30, 2020 •

edited

Loading

tmilewski commented Jan 31, 2020 •

edited

Loading

afladmark commented Jan 31, 2020 •

edited

Loading

Coriou commented May 14, 2020 •

edited

Loading

Glinkis commented May 14, 2020 •

edited

Loading

dulcetti commented May 21, 2020 •

edited

Loading

dulcetti commented May 21, 2020 •

edited

Loading