Добавьте локальные файлы уценки в слой GraphQL в Gridsome

Question

В Gridsome, как вы добавляете локальные файлы разметки в слой GraphQL, чтобы вы могли добавить graphql к компонентам vue?

На момент написания документа Gridsome для добавления данных из локальных файлов были пусты.

Answer 1

Начальный блог также имеет рабочую реализацию: https://github.com/gridsome/gridsome-starter-blog/blob/master/gridsome.config.js

Мрачный репо для source-filesystem Есть несколько документов, чтобы помочь: https://github.com/gridsome/gridsome/tree/master/packages/source-filesystem

Документы импортируются сюда в случае разрыва ссылки в будущем (но ссылка, вероятно, будет более актуальной).

@ Gridsome / источник-файловая система

Преобразуйте файлы в контент, который можно получить с помощью GraphQL в ваших компонентах.

устанавливать

• yarn add @gridsome/source-filesystem
• npm install @gridsome/source-filesystem

использование

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'BlogPost',
        route: '/blog/:year/:month/:day/:slug'
      }
    }
  ]
}

Исходный файл файловой системы также потребует преобразователя для анализа файлов. В приведенном выше примере ищется набор файлов Markdown, поэтому, чтобы Gridsome мог понять содержимое файлов, вы должны установить @ gridsome / transformer-notes в качестве зависимости dev в вашем проекте. Gridsome автоматически преобразует файлы для вас, если преобразователь, который поддерживает ваши файлы, найден в вашем package.json,

Опции

дорожка

• Тип: string требуется

Где искать файлы. Должен быть глобальный путь.

TYPENAME

• Тип: string
• По умолчанию: 'FileNode'

Тип GraphQL и имя шаблона. .vue файл в src/templates должен соответствовать typeName иметь шаблон для него.

маршрут

• Тип: string

Определите динамический маршрут, если ваш источник может иметь определенную структуру имени пути. Это создаст единый маршрут для всех узлов из этого источника. Возможные параметры пути year, month, day, slug или любое значение настраиваемого поля. Если опущен, маршрут для каждого файла будет создан на основе их пути и имени файла. Узнайте больше о параметрах маршрута.

рефов

• Тип: object

Определите поля, которые будут иметь ссылку на другой узел. Ссылка typeName как ожидается, будет существовать. Но тип контента также может быть создан автоматически, если вы установите create: true, Узнайте больше о ссылках.

{
  refs: {
    // Reference to existing authors by id.
    author: 'Author',
    // Create a Tag content type and its nodes automatically.
    tags: {
      typeName: 'Tag',
      route: '/tag/:id',
      create: true
    }
  }
}

индекс

• Тип: Array
• По умолчанию: ['index']

Определите, какие файлы считать индексными файлами. Эти файлы не будут отображаться в своем пути к файлу и станут основными index.html файл каталога. Убедитесь, что в каталоге имеется только один возможный индексный файл, если задано несколько имен индексов.