Gatsby: Gatsby: Integration with Contentful - struggling to add data in the component

[theofromthelabo]

Dear !

HELP ! trying to integration Contentful with my Gatsby. I think I'm almost there, just the final touch that I'm missing ;)

I try it first on the tagline of my homepage: "Solve problem with digital solution(s)"

in Contentful -
Content Model: Homepage - text | ID: homepageText
Field: tagline

I would like to integrate this data from contentful to the h1 tag that is part of the Banner.js component.

Can you please guide me to integrate this data from Contenful ?

Here is my repo: https://github.com/theofromthelabo/thelabo

Thxxxxx. so much!

Cheers

[wardpeet]

Hey, without an env variable it would be hard to test this but I see that you use a pagequery inside the banner.js component.

inside components you should use a static query which is described here:
https://www.gatsbyjs.org/docs/static-query/

[theofromthelabo]

@wardpeet ! thx you a lot ! it works! the learning curve takes some time!

error gatsby-node.js returned an error
  TypeError: homepageText.forEach is not a function
  - gatsby-node.js:35 graphql.then.result
    /Users/tcourtial/thelabo/gatsby-node.js:35:22

Also I'm getting this error from gatsby-node.js => https://github.com/theofromthelabo/thelabo/blob/master/gatsby-node.js

do you have any idea to resolve it ?

thank you !

[jonniebigodes]

@theofromthelabo if you don't mind waiting i'm going to take a closer look when i get home and see what i can come up with...in the meantime take a look at #13288 and repo for some context. I'm perfectly aware that they might be unrelated issues, but at least it will give you some context when working and pulling data from contentful to Gatsby. Sounds good?

[jonniebigodes]

@theofromthelabo that error usually happens when you try to iterate something that is not iterable. but looking at you said and what you have in your gatsby-node.js in the repository you mentioned there's no reference to homepageText.forEach. Also is that error happening on deploy or locally? Also a quick tip for you, it seems that when you commited and pushed the code, you didn't have a .gitignore file and the folders .cache public and node_modules were commited, in the future avoid commiting those, as they should be only be available locally when the individual that clones the repo issues npm install for instance. As the presence of these folders might lead to some problems

[theofromthelabo]

@jonniebigodes thx ! very helpful !

regarding the error I got - it has been fixed with the following code in the gatsby-node.js:
i was getting this error locally.

        const homepages = result.data.allContentfulHomepageText.edges

        homepages.forEach((index) => {
            createPage({
                path: `/${index.node.id}/` , 
                component: homepageTemplate, 
                context: {
                    id: index.node.id,
                },
            })
        })

Folders .cache public and node_modules: I pushed them to the repo before adding .gitignore - can I delete these folders from my Github directly (https://github.com/theofromthelabo/thelabo)?

Also I have another question regarding the rich text editor of Contentful. How can we create/manage the different colour of text?
Maybe this question should be asked to https://github.com/contentful directly.

cheers and thx again !

[jonniebigodes]

@theofromthelabo Sorry for the late response and yes, the .cache public and node_modules should only exist on your end, on your local machine for the reason i stated above. Also i've been tinkering with contentful model trying to get something like you asked in your comment above, To no luck. The only way is to do it the "old fashioned way" (pardon the bad pun) with the css or inline styles. but in my defense i'm no expert in contentful in any way shape or form and there might be some other more edgier approach to it that i was not able to achieve. Probably in there you might have a better luck in the contentful issues.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!