1

I am using Craft in headless mode with the CraftQL plugin. My front end is built using Gatsby JS.

I am able to query entries and output the data to my templates, however Global fields are not available. Here is my code:

// gatsby-config.js
plugins: [
  {
        resolve: `gatsby-source-craftcms`,
        options: {
            endpoint: `http://cms.local/api`,
            token: `REDACTED`,
            query: `{
                globals: globals {
                    contact {
                        address
                    }
                },
                home: entries(section:[home]) {
                    id
                    title
                    ... on Home {
                        subHeading
                        intro
                        ctaButton {
                            ... on CtaButtonButton {
                                __typename
                                text
                                linkUrl
                            }
                        }
                    }
                },
// etc

And then in my template:

export const query = graphql`
  query {
    home {
        title
        subHeading
        intro
        ctaButton {
            text
            linkUrl
        }
    }
    globals {
        contact {
            address
        }
    }
  }
`

In my console I get:

error  Cannot query field "globals" on type "Query"

If I remove the globals from the query I can successfully build and output data.home.title.

I've tried using the CraftQL browser in the CMS and I can successfully query globals:

enter image description here

I'm confident I'm missing something but can find nothing in the docs for Gatsby-Source-Craft or CraftQL.

Anyone have any idea what I'm doing wrong here??

1

In looking at this, the first thing I notice is that your query has a field called globals, but your error has the singular global.

If you open Gatsby’s GraphiQL instance (http://localhost/8000/___graphql in develop mode), can you see the Craft CMS data in the docs? That might help zero in on the query to use in Gatsby.

Hope that helps!

| improve this answer | |
  • Hi and thanks for the response. That was a typo. I was trying all sorts to get this working and copy/pasted from the wrong terminal. I updated my question. I can see the Craft CMS data for home but not globals. I've made a reduced test with just 1 template and querying only home and globals and same outcome. I'm doing/not doing something... Oh well. I'll keep plugging away. Thanks again! – matthewbeta Nov 6 '18 at 16:47
1

So having spoken to the maker of CraftQL yesterday, my mistake was assuming I needed to use gatsby-source-craftcms as my source plugin. In actual fact, the standard gatsby-source-graphql was much better and more abstract, meaning you don't need to construct giant graphQL queries in the gatsby-config. Also the docs for it are much better explained.

now my gatsby-config.js looks like this:

plugins: [
    {
        resolve: `gatsby-source-graphql`,
        options: {
    typeName: "Craft",
    fieldName: "craft",
    // Url to query from
    url: "http://cms.local/api",
    // HTTP headers
    headers: {
      Authorization: `bearer ACCESSTOKENHERE`,
    }
        },
    },

and my query looks like this

{
  craft {
    globals {
      contact {
        address
      }
    }
  }
}

which is much more sane and closer the the normal Twig API

You can view the Twitter exchange here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.