如何在Gatsby中用GraphQL实现关联(Join)查询？附Netlify CMS配置

嘿，我来帮你搞定这个关联查询的问题！结合你的Netlify CMS配置，我们可以分几步实现Gatsby里的关联查询：

1. 先完善Netlify CMS的Relation配置 #

你当前的relation配置不完整，需要指定关联的集合、显示字段等，这样Netlify CMS才能正确把posts和tags关联起来，存下正确的关联值：

- label: "Posts"
  name: "posts"
  folder: "src/data/posts"
  create: true
  slug: "{{slug}}"
  fields:
    - {label: "Id", name: "title", widget: "string"}
    - label: "Tags"
      name: "tags"
      widget: "list"
      fields:
        - label: "Tag"
          name: "tag"
          widget: "relation"
          collection: "tags" # 指定关联的tags集合
          displayFields: ["title"] # 后台选择时显示的字段
          searchFields: ["title", "description"] # 搜索时用到的字段
          valueField: "title" # 存储到posts文件里的字段值（这里用tag的title）

2. 确保Gatsby能读取并解析你的数据文件 #

在gatsby-config.js里配置文件系统源和解析器，让Gatsby能读取src/data/tags和src/data/posts里的文件：

module.exports = {
  plugins: [
    // 读取tags文件夹
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `tags`,
        path: `${__dirname}/src/data/tags`,
      },
    },
    // 读取posts文件夹
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/data/posts`,
      },
    },
    // 解析YAML文件（如果你的内容是YAML格式的话）
    `gatsby-transformer-yaml`,
    // 如果是Markdown格式，换成gatsby-transformer-remark
    // `gatsby-transformer-remark`,
  ],
};

3. 自定义GraphQL Schema建立关联 #

Gatsby默认不会自动识别Netlify CMS的关联关系，所以我们需要在gatsby-node.js里自定义Schema，用@link指令手动建立posts和tags的关联：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    # 定义Posts的类型，关联tags
    type PostsYaml implements Node {
      tags: [PostsYamlTags]
    }
    # 定义Posts里的tags子项，关联对应的Tag数据
    type PostsYamlTags {
      tag: String
      # 通过tag的title关联到TagsYaml
      tagData: TagsYaml @link(from: "tag" by: "title")
    }
    # 定义Tags的类型
    type TagsYaml implements Node {
      title: String
      description: String
    }
  `;
  createTypes(typeDefs);
};

这里的核心是@link(from: "tag" by: "title")，它告诉Gatsby：把PostsYamlTags里的tag字段值，和TagsYaml里的title字段匹配，从而关联到对应的tag详情。

4. 编写关联查询获取数据 #

现在你就可以写GraphQL查询，一次性获取posts和它们对应的tag详情了：

query GetAllPostsWithTags {
  allPostsYaml {
    nodes {
      title # 文章标题
      tags {
        tagData {
          title # 标签名称
          description # 标签描述
        }
      }
    }
  }
}

这个查询会返回所有文章，每篇文章下都会包含它关联的所有标签的完整信息。

如果你的数据是Markdown格式，只需要把上面的PostsYaml和TagsYaml换成MarkdownRemark，并调整对应的字段路径即可。

内容的提问来源于stack exchange，提问作者deemaagog