gatsby: gatsby-source-contentful/GraphQL throws error when using emojis in Contentful content type name

Preliminary Checks

Description

I’m building my first Contentful project. In the Contentful demo setups they are using emojis in the content type names. I have also got this recommendation from a contentful representative. And it seems like a good idea to keep your content types organized:

image

The app should be run on GatsbyJS. So I initiated a

npx gatsby new gatsby-starter-contentful-homepage https://github.com/gatsbyjs/gatsby-starter-contentful-homepage

I have also setup the gatsby-config.js for gatsby-source-contentful like so:

{
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_CDA_TOKEN,
      },
}

But when I run gatsby develop I get this GraphQL error. It seems like emojis can’t be used in Contentful content type names together with Gatsby.

info Contentful: 0 deleted assets
info Creating 1 Contentful Link nodes
info Creating 1 Contentful ✨ Contact me form (not in beta) nodes
info Creating 1 Contentful ✨ Framework nodes
info Creating 1 Contentful ✨ Office nodes
info Creating 1 Contentful 🧩 Editorial card (not in beta) nodes
info Creating 7 Contentful 📄 Common page nodes
info Creating 4 Contentful ✨ Product structure item nodes
info Creating 1 Contentful 🧩 Category list nodes
info Creating 1 Contentful 🧩 Product list nodes
info Creating 1 Contentful 📑 Article page nodes
info Creating 1 Contentful ✨ Ecom common nodes
info Creating 1 Contentful 🧩 Cart nodes
info Creating 1 Contentful ✨ Checkout - Unloading nodes
info Creating 1 Contentful 🧩 Checkout nodes
info Creating 1 Contentful ✨ Checkout - Delivery time nodes
info Creating 1 Contentful ✨ Checkout - Delivery address nodes
info Creating 1 Contentful ✨ Checkout - Delivery recipient nodes
info Creating 1 Contentful 🧩 Favorites nodes
info Creating 1 Contentful 🧩 Rich text nodes
info Creating 1 Contentful 🧩 Order confirmed nodes
info Creating 6 Contentful asset nodes
success Contentful: Create nodes - 0.205s
success Contentful: Process data - 0.237s
success Checking for changed pages - 0.002s
success source and transform nodes - 1.098s

 ERROR 

Missing onError handler for invocation 'building-schema', error was 'Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but
"Contentful✨ContactMeFormNotInBeta" does not.'. Stacktrace was 'GraphQLError: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but
"Contentful✨ContactMeFormNotInBeta" does not.
    at isValidNameError (C:\customername\node_modules\graphql\utilities\assertValidName.js:42:12)
    at assertValidName (C:\customername\node_modules\graphql\utilities\assertValidName.js:21:15)
    at checkIsAllowedTypeName (C:\customername\node_modules\gatsby\src\schema\schema.js:619:3)
    at forEach (C:\customername\node_modules\gatsby\src\schema\schema.js:297:9)
    at Array.forEach (<anonymous>)
    at addTypes (C:\customername\node_modules\gatsby\src\schema\schema.js:258:9)
    at updateSchemaComposer (C:\customername\node_modules\gatsby\src\schema\schema.js:130:9)
    at buildSchema (C:\customername\node_modules\gatsby\src\schema\schema.js:71:9)
    at build (C:\customername\node_modules\gatsby\src\schema\index.js:112:18)
    at buildSchema (C:\customername\node_modules\gatsby\src\services\build-schema.ts:19:3)'

Is this a bug in gatsby-source-contentful? It seems like the plugin is not sanitizing the content type names before adding them to the GraphQL schema.

Reproduction Link

https://github.com/samuel99/contentful-bug-report

Steps to Reproduce

  1. Pull content from https://github.com/samuel99/contentful-bug-report
  2. Create a contentful account with a single content type in it where the content type entry title contains an emoji.
  3. Create a content instance based on the newly created content type.
  4. Go to contentful settings and create a new delivery API key.
  5. Copy space ID and access token.
  6. Edit the gatsby-config.js spaceid and accessToken: { resolve: gatsby-source-contentful, options: { spaceId: myspaceid, accessToken: myContentDeliveryApiToken, }, }
  7. Run npm install.
  8. Run gatsby develop

Expected Result

The plugin should remove all illegal characters before passing the content type names to GraphQL.

Actual Result

Gatsby develop fail with the message:

ERROR 

Missing onError handler for invocation 'building-schema', error was 'Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but
"Contentful✨ContactMeFormNotInBeta" does not.'. Stacktrace was 'GraphQLError: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but
"Contentful✨ContactMeFormNotInBeta" does not.
    at isValidNameError (C:\customername\node_modules\graphql\utilities\assertValidName.js:42:12)
    at assertValidName (C:\customername\node_modules\graphql\utilities\assertValidName.js:21:15)
    at checkIsAllowedTypeName (C:\customername\node_modules\gatsby\src\schema\schema.js:619:3)
    at forEach (C:\customername\node_modules\gatsby\src\schema\schema.js:297:9)
    at Array.forEach (<anonymous>)
    at addTypes (C:\customername\node_modules\gatsby\src\schema\schema.js:258:9)
    at updateSchemaComposer (C:\customername\node_modules\gatsby\src\schema\schema.js:130:9)
    at buildSchema (C:\customername\node_modules\gatsby\src\schema\schema.js:71:9)
    at build (C:\customername\node_modules\gatsby\src\schema\index.js:112:18)
    at buildSchema (C:\customername\node_modules\gatsby\src\services\build-schema.ts:19:3)'

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.13
  Browsers:
    Chrome: 102.0.5005.63
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.30)
  npmPackages:
    gatsby: ^4.15.2 => 4.15.2
    gatsby-plugin-image: 2.15.1 => 2.15.1
    gatsby-plugin-sharp: 4.15.1 => 4.15.1
    gatsby-source-contentful: ^7.13.1 => 7.13.1
    gatsby-source-filesystem: 4.15.0 => 4.15.0
    gatsby-transformer-sharp: 4.15.1 => 4.15.1
  npmGlobalPackages:
    gatsby-cli: 4.15.0

Config Flags

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 2
  • Comments: 15

Most upvoted comments

Try setting the useNameForId config option from gatsby-source-contentful to false so that it uses the content type ID from Contentful as opposed to the content type name when generating the graphql node. I believe that should fix this problem as the content type IDs from Contentful do not contain emojis

Hiya!

This issue has gone quiet. Spooky quiet. 👻

I kind of think this should not be closed.