![](/img/trans.png)
[英]Are GatsbyJS GraphQL queries tied to the component where it's written?
[英]Scoping folder structure in GraphQL Queries with GatsbyJS
我確實有類別、作品和圖片。 它們都是級聯順序; 典型的親子關系。 文件夾結構已經代表了這個層次結構。 最后,我將更詳細地解釋我的主要問題。
文件夾結構:
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 等)。
gatsby-config.js:
// ...
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'work',
path: `${__dirname}/work/`,
},
},
// ...
為了解析文件,我使用gatsby-source-filesystem
插件。 因此,我可以通過sourceInstanceName: { eq: "work" }
查詢該文件夾。
gatsby-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
}
}
}
}
查詢類別drawing
中的工件drawing-1
所有圖片。
問題:
在最好的情況下,我想遍歷每個類別並顯示帶有圖片和來自index.md
描述的index.md
。 但是如何單獨提取類別以查詢碎片? 我應該如何將這些實體與 Gatsby 映射在一起? 我的概念是否具有誤導性? 如果你有什么好的建議,我應該考慮什么來實現我的目標,我會很高興的。
編輯:
現在我正在擺弄sourceNodes()
並從文件夾結構中創建抽象節點。 所需的 JSON 可能如下所示:
{
"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"
}
}
}
]
}
}
}
您可以使用的蓋茨比節點之間的父/子關系createParentChildLink
方法,以找到您可以使用父節點getNodesByType
無證方法。
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"
}
]
}
}
]
}
}
}
為了說明, __typename ... on Directory
使您有機會從整體上查詢相應的節點。 否則,您將只獲得子節點的 ID。 為了更好地理解,請訪問: https : //graphql.org/learn/schema/#union-types
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.