Как установить соединение "один ко многим" между Netlify CMS и Gatsby

Question

Я использую Netlify CMS на сайте gatsby. Я использовал виджет netlify CMS в моей коллекции постов, чтобы ссылаться на поле заголовка моей коллекции авторов, поэтому...

- {label: "Author", name: "author", widget: "relation", collection: "authors", searchFields: ["title", "firstName", "lastName"], valueField: "title"}

Это хорошо работает, но когда я делаю запрос в моем окне GraphiQL, единственным доступным полем является author, с одной строкой, как мне получить доступ ко всем frontmatter конкретного автора?

Answer 1

Установление соединения в Netlify оказывается просто первым шагом. Затем вам нужно сконфигурировать ваш файл gatsby-node.js для создания этих отношений при сборке. Конечный результат позволяет сделать запрос к сообщениям, у которых есть вложенный автор. Вот и все настройки.

Сначала netlifyCMS config.yml, который у меня есть в static/admin

backend:
  name: git-gateway
  branch: development

media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads"

    collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "src/pages/blog/posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Author", name: "author", widget: "relation", collection: "authors", searchFields: ["title", "firstName", "lastName"], valueField: "title"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "authors"
    label: "Authors"
    folder: "src/authors"
    create: true
    slug: "{{slug}}"
    fields: 
      - {label: "Layout", name: "layout", widget: "hidden", default: "author"}
      - {label: "Full Name", name: "title", widget: "string"}
      - {label: "First Name", name: "firstName", widget: "string"}
      - {label: "Last Name", name: "lastName", widget: "string"}
      - {label: "Position", name: "position", widget: "string"}
      - {label: "Profile Picture", name: "profilePicture", widget: "image"}
      - {label: "Email", name: "email", widget: "string"}

Затем внизу моего файла gatsby-node.js.

exports.sourceNodes = ({ boundActionCreators, getNodes, getNode }) => {
    const { createNodeField } = boundActionCreators;

    const postsOfAuthors = {};
    // iterate thorugh all markdown nodes to link books to author
    // and build author index
    const markdownNodes = getNodes()
        .filter(node => node.internal.type === "MarkdownRemark")
        .forEach(node => {
            if (node.frontmatter.author) {
                const authorNode = getNodes().find(
                    node2 =>
                        node2.internal.type === "MarkdownRemark" &&
            node2.frontmatter.title === node.frontmatter.author
                );

                if (authorNode) {
                    createNodeField({
                        node,
                        name: "author",
                        value: authorNode.id,
                    });

                    // if it's first time for this author init empty array for his posts
                    if (!(authorNode.id in postsOfAuthors)) {
                        postsOfAuthors[authorNode.id] = [];
                    }
                    // add book to this author
                    postsOfAuthors[authorNode.id].push(node.id);
                }
            }
        });

    Object.entries(postsOfAuthors).forEach(([authorNodeId, postIds]) => {
        createNodeField({
            node: getNode(authorNodeId),
            name: "posts",
            value: postIds,
        });
    });
};

И, наконец, в gastby-config.js вам нужно добавить отображение.

    mapping: {
        "MarkdownRemark.fields.author": "MarkdownRemark",
        "MarkdownRemark.fields.posts": "MarkdownRemark",
    }

Что дает вам возможность сделать запрос, как тис...

query AllPosts {
  allMarkdownRemark (
    filter: { fileAbsolutePath: {regex : "\/posts/"} },
    sort: {fields: [frontmatter___date], order: DESC}
  ){
    edges {
      node {
        fields {
          author {
            fields {
              slug
            }
            frontmatter {
              title
              firstName
              lastName
              profilePicture

            }
          }
          slug
        }
        frontmatter {
          title
          date(formatString:"MMM DD 'YY")
          thumbnail
          layout
        }
        excerpt
      }
    }
  }
}

Answer 2

Не заставить это работать для аналогичного варианта использования. Есть ли где-нибудь руководство, объясняющее, что делают все части кода?

Это должно быть очень распространенной проблемой, верно?