Gatsby: преобразование данных, возвращаемых из запроса страницы во время сборки

#reactjs #graphql #gatsby

#reactjs #graphql #gatsby

Вопрос:

Например, я хочу сгладить массив списков, возвращаемых запросом во время сборки, до того, как он станет доступен компоненту страницы, т. Е. Без необходимости делать это на стороне клиента при каждом запросе. Существует ли метод жизненного цикла или промежуточное программное обеспечение, где это можно сделать?

Ответ №1:

Да! Это одна из вещей, которые я больше всего ценю в уровне данных GraphQL в Gatsby. Существует множество API-интерфейсов, доступных для преобразования узлов данных, включая добавление новых узлов на основе типа, и все это перед выполнением запросов страницы. Это означает, что вы можете создавать новые структуры, которые точно соответствуют вашим потребностям, затем извлекать поля из этих структур для загрузки компонентов вашей страницы, и результаты этих запросов окажутся в ваших файлах page-data.json без каких-либо следов источника.

onCreateNode (документы)

Вызывается при создании нового узла. Плагины, желающие расширить или преобразовать узлы, созданные другими плагинами, должны реализовать этот API.

 exports.onCreateNode = ({ node, actions }) => {
  const { createNode, createNodeField } = actions
    // Transform the new node here and create a new node or
    // create a new node field.
}
  

createNodeField (документы)

Расширьте еще один узел. Новое поле узла помещается под ключом fields в объекте extended node.

Как только плагин запрашивает имя поля, имя поля не может использоваться другими плагинами. Кроме того, поскольку узлы неизменяемы, вы не можете изменять узел напрямую. Итак, чтобы расширить другой узел, используйте это.

 createNodeField({
  node,
  name: `happiness`,
  value: `is sweet graphql queries`
})
  

createResolvers (документы)

Добавьте пользовательские преобразователи полей в схему GraphQL.

Позволяет добавлять новые поля к типам, предоставляя конфигурации полей или добавляя функции распознавания к существующим полям.

 exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    Author: {
      fullName: {
        resolve: (source, args, context, info) => {
          return source.firstName   source.lastName
        }
      },
    },
    Query: {
      allRecentPosts: {
        type: [`BlogPost`],
        resolve: (source, args, context, info) => {
          const posts = context.nodeModel.getAllNodes({ type: `BlogPost` })
          const recentPosts = posts.filter(
            post => post.publishedAt > Date.UTC(2018, 0, 1)
          )
          return recentPosts
        }
      }
    }
  }
  createResolvers(resolvers)
}