Вызовите другую конечную точку REST для каждой страницы Гэтсби

Question

Я пишу плагин Gatsby для использования службы возврата 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
    },
  })
})

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