我有类别，件和图片。他们都处于层叠状态;典型的亲子关系。文件夹结构已经代表了这种层次结构。最后，我将更详细地解释我的主要问题。
文件夹结构：
work
├── drawing
│ ├── drawing-1
│ │ ├── image.1.jpg
│ │ ├── image.2.jpg
│ │ ├── image.3.jpg
│ │ ├── image.jpg
│ │ └── index.md
│ └── index.md
├── sculpture
│ ├── gaehnschreier
│ │ ├── image.1.JPG
│ │ ├── image.2.jpg
│ │ ├── image.3.JPEG
│ │ ├── image.4.png
│ │ ├── image.PNG
│ │ └── index.md
│ └── index.md
└── watercolor
├── index.md
├── portrait-1
│ ├── image.jpg
│ └── index.md
└── portrait-2
├── image.jpg
└── index.md
这是一个简单的投资组合层次结构。 work是根文件夹，具有不同的类别，例如drawing。在里面你会找到代表特定作品的文件夹。每件作品都有一张index.md，上面有关于该作品的详细信息和多张图片（jpeg，png等）。
盖茨比-config.js：
// ...
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'work',
path: `${__dirname}/work/`,
},
},
// ...
为了解析文件，我使用gatsby-source-filesystem插件。所以，我可以通过sourceInstanceName: { eq: "work" }查询该文件夹。
盖茨比-的node.js：
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `Directory`) {
if (node.sourceInstanceName === `work`) {
if (!node.relativeDirectory) {
createNodeField({
node,
name: `workCategory`,
value: true,
})
}
}
}
}
此代码可帮助我标记类别以供日后使用，例如在概述页面上显示类别列表。
示例查询：
{
allDirectory(
filter: {
sourceInstanceName: { eq: "work" }
relativeDirectory: { eq: "" }
}
) {
edges {
node {
dir
name
extension
relativeDirectory
relativePath
}
}
}
}
查询所有类别。
{
allDirectory(
filter: {
sourceInstanceName: { eq: "work" }
relativeDirectory: { eq: "drawing" }
}
) {
edges {
node {
dir
name
extension
relativeDirectory
relativePath
}
}
}
}
查询drawing类别的所有部分。
{
allFile(
filter: {
sourceInstanceName: { eq: "work" }
extension: { in: ["jpg", "jpeg", "png"] }
relativeDirectory: { eq: "drawing/drawing-1" }
}
) {
edges {
node {
dir
name
extension
relativeDirectory
relativePath
}
}
}
}
在Qazxswpoi类别中查询drawing-1的所有图片。
问题：
在最好的情况下，我想迭代每个类别，并用drawing的图片和描述显示工件。但是，我如何分别提取类别以查询碎片？我应该如何将这些实体与盖茨比一起映射？我的概念是否具有误导性？如果你有任何好的建议，我应该想到实现我的目标，我会很高兴。
编辑：
现在我正在摆弄index.md并从文件夹结构中创建抽象节点。所需的JSON可能如下所示：
sourceNodes()您可以使用{
"data": {
"allWorkCategory": {
"edges": [
{
"node": {
"path": "work/scuplture",
"children": [
{
"node": {
"internal": {
"type": "WorkItem",
"name": "Drawing 1",
"pictures": {
// ...
}
}
}
}
],
"internal": {
"type": "WorkCategory"
}
}
},
{
"node": {
"path": "work/drawing",
"children": [],
"internal": {
"type": "WorkCategory"
}
}
},
{
"node": {
"path": "work/watercolor",
"children": [],
"internal": {
"type": "WorkCategory"
}
}
}
]
}
}
}
在gatsby节点之间创建父/子关系，以便找到可以使用createParentChildLink method的父节点。
getNodesByType undocumented method相应的查询可能如下所示：
const path = require('path')
exports.onCreateNode = ({
node,
getNodesByType,
actions
}) => {
const {
createParentChildLink
} = actions
if (node.internal.type === 'Directory') {
if (node.sourceInstanceName === 'work') {
// in some case the trailing slash is missing.
// Always add it and normalize the path to remove duplication
const parentDirectory = path.normalize(node.dir + '/')
const parent = getNodesByType('Directory').find(
n => path.normalize(n.absolutePath + '/') === parentDirectory
)
if (parent) {
node.parent = parent.id
createParentChildLink({
child: node,
parent: parent
})
}
}
}
}
输出看起来像：
{
allDirectory(
filter: {
sourceInstanceName: { eq: "work" }
relativeDirectory: { eq: "" }
}
) {
edges {
node {
name
relativePath
children {
__typename ... on Directory {
name
relativePath
}
}
}
}
}
}
为了便于解释， {
"data": {
"allDirectory": {
"edges": [
{
"node": {
"name": "drawing",
"relativePath": "drawing",
"children": [
{
"__typename": "Directory",
"name": "drawing-1",
"relativePath": "drawing/drawing-1"
}
]
}
},
{
"node": {
"name": "sculpture",
"relativePath": "sculpture",
"children": [
{
"__typename": "Directory",
"name": "gaehnschreier",
"relativePath": "sculpture/gaehnschreier"
}
]
}
},
{
"node": {
"name": "watercolor",
"relativePath": "watercolor",
"children": [
{
"__typename": "Directory",
"name": "portrait-1",
"relativePath": "watercolor/portrait-1"
},
{
"__typename": "Directory",
"name": "portrait-2",
"relativePath": "watercolor/portrait-2"
}
]
}
}
]
}
}
}
为您提供了查询整个对应节点的机会。否则，您将只获得子节点的ID。为了更好地理解，请访问：__typename ... on Directory