每个Gatsby页面调用不同的REST端点

我正在编写一个盖茨比插件来使用HTML返回服务。相关端点会根据我创建的每个盖茨比页面进行更改。具体来说，这是基于区域设置的-

• homepage.com

  需要呼叫

  service.com/en

• homepage.es

  需要呼叫

  service.com/es

等等

我可以从我的项目的

gatsby node.js

将区域设置传递到我的上下文中，这使得它可以在我的页面的

index.js

和GraphQL查询中使用，但我不知道如何在插件中捕获该变量

// project/gatsby-node.js
export.createPages = () => {Locales.forEach(locale => {
  createPage({
    component: myComponent.js,
    context: {
        locale: locale
    },
  })
})

---

我听说在REST服务上需要一个批量端点，然后可以对其进行筛选。这是真的吗如何修改为每个不同页面发送的HTTP调用？

我们使用自定义解析器解决了此问题。我们构建了一个扩展查询语法的插件：

exports.createResolvers = ({ createResolvers }, configOptions) => {
  createResolvers({
    Query: {
      [configOptions.name]: {
        type: `String`,
        args: {
          locale: 'String'
        },
        resolve: async (source, args, context, info) => {
          const {
            htmlServerUrl,
            defaultResponse
          } = configOptions;
          return axios
            .get(`${htmlServerUrl}?args.locale`)
            .then(response => response.data)
            .catch(err => defaultResponse || "");
        },
      },
    },
  })
}

然后，

gatsby config

如下所示：

{
  resolve: "my-plugin",
  options: {
    htmlServerUrl: `http://my.html-service.com`,
    name: "header"
  }
}

最后，这在组件中使用：

query($locale: String) {
  header(locale: $locale)
}

---

我们用自定义解析器解决了这个问题。我们构建了一个扩展查询语法的插件：

exports.createResolvers = ({ createResolvers }, configOptions) => {
  createResolvers({
    Query: {
      [configOptions.name]: {
        type: `String`,
        args: {
          locale: 'String'
        },
        resolve: async (source, args, context, info) => {
          const {
            htmlServerUrl,
            defaultResponse
          } = configOptions;
          return axios
            .get(`${htmlServerUrl}?args.locale`)
            .then(response => response.data)
            .catch(err => defaultResponse || "");
        },
      },
    },
  })
}

然后，

gatsby config

如下所示：

{
  resolve: "my-plugin",
  options: {
    htmlServerUrl: `http://my.html-service.com`,
    name: "header"
  }
}

最后，这在组件中使用：

query($locale: String) {
  header(locale: $locale)
}

---

我认为您需要获取所有区域设置，然后将

locale

变量传递到graphql查询中，而不是将

locale

传递到pluginal，因此应该是

query GetLocale（$locale:String）{header{innerHTML}}

我认为您需要获取所有区域设置，然后将

locale

变量传递到graphql查询中，而不是将

locale

传递给pluginal，因此它应该是

querygetlocale（$locale:String）{header{innerHTML}}

为什么不使用

context

传递给

resolve:async（source，args，context，info）

-它应该包含

locale

-不使用params/args？这有什么好处？不太多，查询中不需要

locale

，查询和代码更干净一点为什么不使用

context

传递给

resolve:async（源代码、args、context、info）

-它应该包含

locale

-不使用params/args？这有什么好处？不太多，查询中不需要

locale

，查询和代码更干净一点