gatsby-uc / gatsby-source-strapi

Gatsby source plugin for building websites using Strapi as a data source
MIT License
354 stars 182 forks source link

"Rich text" field makes a ERROR #11321 PLUGIN #337

Closed grgvn closed 2 years ago

grgvn commented 2 years ago

Hi,

I can't figure out what I am missing for sourcing Rich text fields from Strapi. Also I am sorry if this isn't a plugin bug, I'll post in on StackOverflow otherwise.

I just started a new Gatsby blog with the official starter. Then I followed the instructions to source Gatsby with Strapi.

const strapiConfig = {
  apiURL: `http://localhost:1337`,
  accessToken: `my-token`,
  collectionTypes: [`my-collection-type`],
  singleTypes: [`simple-single-type`],
};

and

{
  resolve: `gatsby-source-strapi`,
  options: strapiConfig,
},

See gatsby-config.js.txt

Everything looks fine as I can see the my collection nodes in Graphql.

Now, I add a Rich Text field in 'my-collection-type' :

image

This makes Gatsby crash

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot read properties of null (reading 'slug')

  47 |
  48 |       createPage({
> 49 |         path: post.fields.slug,
     |                           ^
  50 |         component: blogPost,
  51 |         context: {
  52 |           id: post.id,

File: gatsby-node.js:49:27

  TypeError: Cannot read properties of null (reading 'slug')

  - gatsby-node.js:49 
    /home/gregoire/Desktop/dev/wiki-cas-new/gatsby-node.js:49:27

  - Array.forEach

  - gatsby-node.js:44 Object.exports.createPages
    /home/gregoire/Desktop/dev/wiki-cas-new/gatsby-node.js:44:11

  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5

  - api-runner-node.js:487 runAPI
    [wiki-cas-new]/[gatsby]/src/utils/api-runner-node.js:487:16

failed createPages - 0.070s

See log.txt

However, I can see my Collection type in GraphiQL :

{
  "data": {
    "allStrapiMyCollectionType": {
      "edges": [
        {
          "node": {
            "id": "74341941-4e66-5bd4-a646-afecf997571f",
            "richtext": {
              "data": {
                "id": "f0edc79a-69da-5758-869f-2da62c17a044",
                "internal": {
                  "content": "Hello"
                }
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

I saw some explanations about Rich text fields on the plugin documentation, but I am unsure of what to do with it.

Also here is my config :

Would anyone have an hint for me ?

Thank you, Grégoire

grgvn commented 2 years ago

Problem was that gatsby-transformer-remark also contains the Strapi nodes ; nodes which doesn't contain the Slug field used in the query in gatsby-node.js.