Как добавить пользовательский параметр GraphQL в узел GatsbyJS?

Я создал следующий узел gatsby для запроса 1 записи

const axios = require("axios");

exports.sourceNodes = async (
  { actions, createNodeId, createContentDigest },
  configOptions
) => {
  const { createNode } = actions;

  // Gatsby adds a configOption that's not needed for this plugin, delete it
  delete configOptions.plugins;
  // Helper function that processes a post to match Gatsby's node structure
  const processPost = post => {
    const nodeId = createNodeId(`gutenberg-post-${post.id}`);
    const nodeContent = JSON.stringify(post);
    const nodeData = Object.assign({}, post, {
      id: nodeId,
      parent: null,
      children: [],
      internal: {
        type: `GutenbergPost`,
        content: nodeContent,
        contentDigest: createContentDigest(post)
      }
    });
    return nodeData;
  };

  const apiUrl = `http://wp.dev/wp-json/gutes-db/v1/${
    configOptions.id || 1
  }`;

  // Gatsby expects sourceNodes to return a promise
  return (
    // Fetch a response from the apiUrl
    axios
      .get(apiUrl)
      // Process the response data into a node
      .then(res => {
        // Process the post data to match the structure of a Gatsby node
        const nodeData = processPost(res.data);
        // Use Gatsby's createNode helper to create a node from the node data
        createNode(nodeData);
      })
  );
};

Мой источник - это API для отдыха, который имеет следующий формат:

http://wp.dev/wp-json/gutes-db/v1/{ID}

В настоящее время набор идентификаторов узла gatsby по умолчанию равен 1.

Я могу запросить его в graphql, выполнив следующие действия:

{
  allGutenbergPost {
    edges {
      node{
        data
      }
    }
  }
}

Это всегда будет возвращать запись 1

Я хотел добавить настраиваемый параметр для ID, чтобы я мог это сделать

{
  allGutenbergPost(id: 2) {
    edges {
      node{
        data
      }
    }
  }
}

Какие корректировки я должен сделать с моим существующим кодом?

Используя новые API-интерфейсы настройки схемы, вы можете использовать хук createResolvers, тогда вам даже не нужно будет заранее исходить, но пусть запрос решит, что возвращать gatsbyjs.org/blog/2019-03-18-releasing-new-schema-customizat‌​ion/…

Can Rau 28.04.2019 23:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
371
1

Ответы 1

Я полагаю, вы создание страницы программно? Если да, то в хуке onCreatePage, когда вы выполняете createPage, вы можете передать объект context. Все, что там будет, будет доступно как переменная запроса.

Например, если у вас есть

createPage({
  path,
  component: blogPostTemplate,
  context: {
    foo: "bar",
  },
})

Затем вы можете выполнить запрос страницы, например

export const pageQuery = graphql`
  ExampleQuery($foo: String) {
    post(name: { eq: $foo }) {
      id
      content
    }
  }
`

Если вы просто хотите отфильтровать по идентификатору, вы можете проверить документы на операторы фильтрации и сравнения.

{
  allGutenbergPost(filter: { id: { eq: 2 }}) {
    edges {
      node{
        data
      }
    }
  }
}

или

{
  gutenbergPost(id: { eq: 2 }) {
    data
  }
}

Надеюсь, поможет!

Другие вопросы по теме