Gatsby Contentful - GraphQL 查询错误：未知类型“ContentfulFixed”

Question

I've decided to build my own blog and chose EmaSuriano's gatsby-starter-mate as my Gatsby Starter (I am absolutely new to Gatsby and Contentful!)

I did everything as told, setting up my environment, setting up Contentful space and logged in to Contentful and so on.

Currently, I am on Ubuntu 18.04 and

$ gatsby --version
Gatsby CLI version: 2.10.10
Gatsby version: 2.19.45

$ contentful --version
1.2.14

---

Everything below suceeded without problem

$ gatsby new mate-portfolio https://github.com/EmaSuriano/gatsby-starter-mate  
$ yarn setup

But when I

$ yarn start

and enter localhost:8000 I get Failed to Compile page with huge amount of errors.

I refered to this https://github.com/gatsbyjs/gatsby/issues/16455 issue to solve my problem and tried the solutions available there such as

1. Delete codes in fragments.js file
2. Delete .cache folder
3. Add dummy image to my space

I also installed $ npm install --save gatsby-source-contentful . Did $ yarn add gatsby as well as $ yarn global add contentful-cli too.

But none of them worked. Below is my error that shows on localhost:8000 when I $ yarn start .
Can anyone please help me with this issue? Thank you so much!

There was an error in your GraphQL query:

Unknown type "ContentfulFixed".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulFixed".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulFluid".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulFluid".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulResolutions".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulResolutions".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulResolutions".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulSizes".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulSizes".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Unknown type "ContentfulSizes".

File: /blog/node_modules/gatsby-source-contentful/src/fragments.js

There was an error in your GraphQL query:

Cannot query field "contentfulAbout" on type "Query".

If you don't expect "contentfulAbout" to exist on the type "Query" it is most likely a typo.
However, if you expect "contentfulAbout" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "contentfulAbout" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/components/Helmet.js

There was an error in your GraphQL query:

Cannot query field "contentfulAbout" on type "Query".

If you don't expect "contentfulAbout" to exist on the type "Query" it is most likely a typo.
However, if you expect "contentfulAbout" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "contentfulAbout" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/components/Footer.js

There was an error in your GraphQL query:

Cannot query field "contentfulAbout" on type "Query".

If you don't expect "contentfulAbout" to exist on the type "Query" it is most likely a typo.
However, if you expect "contentfulAbout" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "contentfulAbout" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/Landing.js

There was an error in your GraphQL query:

Cannot query field "siteMetadata" on type "Site".

If you don't expect "siteMetadata" to exist on the type "Site" it is most likely a typo.
However, if you expect "siteMetadata" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "siteMetadata" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Site":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/Landing.js

There was an error in your GraphQL query:

Cannot query field "contentfulAbout" on type "Query".

If you don't expect "contentfulAbout" to exist on the type "Query" it is most likely a typo.
However, if you expect "contentfulAbout" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "contentfulAbout" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/Projects.js

There was an error in your GraphQL query:

Cannot query field "siteMetadata" on type "Site".

If you don't expect "siteMetadata" to exist on the type "Site" it is most likely a typo.
However, if you expect "siteMetadata" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "siteMetadata" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Site":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/Writing.js

There was an error in your GraphQL query:

Cannot query field "allMediumPost" on type "Query".

If you don't expect "allMediumPost" to exist on the type "Query" it is most likely a typo.
However, if you expect "allMediumPost" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "allMediumPost" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/Writing.js

There was an error in your GraphQL query:

Cannot query field "mediumUser" on type "Query".

If you don't expect "mediumUser" to exist on the type "Query" it is most likely a typo.
However, if you expect "mediumUser" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "mediumUser" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/Writing.js

There was an error in your GraphQL query:

Cannot query field "contentfulAbout" on type "Query".

If you don't expect "contentfulAbout" to exist on the type "Query" it is most likely a typo.
However, if you expect "contentfulAbout" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "contentfulAbout" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /blog/src/sections/About.js

Answer 1

This is an open issue as discussed here . Try adding & publishing any image to media assets could potentially resolve the issue. Also try running

gatsby clean

before running yarn start

Answer 2

I'm the maintainer of that package. I was playing with different versions of the dependencies checking how they work together, and I found out that bumping the version of gatsby actually it's what it breaks the project.

Please check you are using the version "gatsby": "2.15.22", in your package.json , yarn.lock and node_modules .

Hope it helps!

Answer 3

Make sure you have an entry for every content type in contenful. Including an asset. This seems to be many peoples problem in this thread .