使用CraftQL和Gatsby JS查询Craft CMS中的全局字段

时间:2018-11-06 14:29:11

标签: graphql gatsby craftcms

我正在使用CraftQL插件以无头模式使用Craft。我的前端是使用Gatsby JS构建的。

我能够查询条目并将数据输出到我的模板,但是全局字段不可用。这是我的代码:

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

然后在我的模板中:

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

在我的控制台中,我得到:

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

如果我从查询中删除global,则可以成功构建并输出data.home.title

我已经尝试在CMS中使用CraftQL浏览器,并且可以成功查询全局变量:

enter image description here

我确信我会丢失一些东西,但是在Gatsby-Source-CraftCraftQL的文档中什么也找不到。

任何人都知道我在这里做错了什么吗?

1 个答案:

答案 0 :(得分:0)

因此,昨天与CraftQL的制造商进行了交谈,我的错误是假设我需要使用gatsby-source-craftcms作为源插件。实际上,标准gatsby-source-graphql更好,更抽象,这意味着您不需要在gatsby-config中构造巨型的graphQL查询。同样,文档也得到了更好的解释。

现在我的gatsby-config.js看起来像这样:

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`,
    }
        },
    },

我的查询看起来像这样

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

这比正常的Twig API更理智和

您可以查看Twitter exchange here