Question

我正在编写一个Gatsby插件来使用HTML返回服务。相关端点根据我正在创建的每个Gatsby页面而变化。具体来说，这是基于语言环境的-

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

// project/page.js
export default (props) => {
  return (
    <div dangerouslySetInnerHTML={{__html: props.data.header.innerHtml}}></div>
  );
}

export const query = graphql`
query {
  header(locale: $locale) { // my understanding is that this should pass it to the GraphQL query
    innerHtml    
  }
}`

// plugin/gatsby-node.js
exports.sourceNodes = async ({ boundActionCreators }, configOptions) => {
  const { createNode } = boundActionCreators;

  const fetchHtml = () => axios.get(configOptions.htmlServerUrl); // I need to append to the path here
  // await for results
  const res = await fetchHtml();

  const htmlNode = {
    id: "html",
    internal: {
      type: `html`
    },
    innerHtml: res.data,
  };

  return createNode(htmlNode);
}

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

Answer 1

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

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)
}

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

1 个答案: