<p>So having spoken to the maker of CraftQL yesterday, my mistake was assuming I needed to use <code>gatsby-source-craftcms</code> as my source plugin. In actual fact, the standard <a href="https://www.gatsbyjs.org/packages/gatsby-source-graphql/" rel="nofollow noreferrer"><code>gatsby-source-graphql</code></a> was much better and more abstract, meaning you don't need to construct giant graphQL queries in the <code>gatsby-config</code>. Also the docs for it are much better explained.</p>

<p>now my <code>gatsby-config.js</code> looks like this: </p>

<pre><code>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`,
    }
        },
    },
</code></pre>

<p>and my query looks like this</p>

<pre><code>{
  craft {
    globals {
      contact {
        address
      }
    }
  }
}
</code></pre>

<p>which is much more sane and closer the the normal Twig API</p>

<p>You can view the <a href="https://twitter.com/markhuot/status/1059850263706640385" rel="nofollow noreferrer">Twitter exchange here</a> </p>

CC BY-SA 4.0
2018-11-07T10:06:59.537Z
2018-11-07T10:06:59.537Z
matthewbeta
<p>In looking at this, the first thing I notice is that your query has a field called <code>globals</code>, but your error has the singular <code>global</code>.</p>

<p>If you open Gatsby’s GraphiQL instance (<code>http://localhost/8000/___graphql</code> 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.</p>

<p>Hope that helps!</p>

CC BY-SA 4.0
2018-11-06T16:47:13.723Z
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
CC BY-SA 4.0
2018-11-06T16:00:11.500Z
2018-11-06T16:00:11.500Z
jlengstorf
<p>I am using Craft in headless mode with the CraftQL plugin. My front end is built using Gatsby JS.</p>

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

<pre><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
</code></pre>

<p>And then in my template:</p>

<pre><code>export const query = graphql`
  query {
    home {
        title
        subHeading
        intro
        ctaButton {
            text
            linkUrl
        }
    }
    globals {
        contact {
            address
        }
    }
  }
`
</code></pre>

<p>In my console I get:</p>

<pre><code>error  Cannot query field "globals" on type "Query"
</code></pre>

<p>If I remove the <code>globals</code> from the query I can successfully build and output <code>data.home.title</code>.</p>

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

<p><a href="https://i.sstatic.net/chjTo.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/chjTo.png" alt="enter image description here"></a> </p>

<p>I'm confident I'm missing something but can find nothing in the docs for <a href="https://github.com/gusnips/gatsby-source-craftcms/blob/master/README.md" rel="nofollow noreferrer">Gatsby-Source-Craft</a> or <a href="https://github.com/markhuot/craftql" rel="nofollow noreferrer">CraftQL</a>. </p>

<p>Anyone have any idea what I'm doing wrong here??</p>

<craft3>
Querying Global fields using CraftQL and Gatsby JS
# Querying Global fields using CraftQL and Gatsby JS

(Asked by: username_0 on 2018-11-06)

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:
 
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??

**Tags:** craft3


---

## 2 answers

### Answer by username_0 on 2018-11-07. Score: 1 | Accepted answer

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


---

### Answer by username_1 on 2018-11-06. Score: 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!

> **Comments:**
> **username_0**: 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!  

---

