Question

我的项目结构如下：

-$PROJECT
--src
---data
----projects
-----project1
------project.json
------images
-------project1-preview.png
-----project2
------project.json
-------images
...

等等，对于许多项目而言。我可以在graphQl中使用projects在将这些project.json文件命名为项目标题时，并在allProjectsJson文件夹中查询它们，但是现在它们位于projects的子文件夹中。我只能作为allProject1Json单独查询它们，依此类推。有没有一种查询allProjectsJson的方法，所以我可以获得所有的project.json文件？

我可以通过对json文件进行过滤的查询allFile来找到我的项目文件，但是，这些文件不是json转换的，所以我无法访问元素。

在我的gatsby-config文件中，我正在导入src / data作为文件源。

Answer 1

根据我在https://github.com/gatsbyjs/gatsby/issues/20734上的回答：

啊，我明白你的意思了:) 幸运的是，gatsby-transformer-json有一个插件选项，可以帮助您摆脱困境！

这是typeName选项。您应该能够检查每个JSON节点上的字段，并将其用作类型名称。像这样：

    {
      resolve: `gatsby-transformer-json`,
      options: {
        typeName: ({ node, object, isArray }) =>
          object.project ? `Project` : `Json`,
      },
    },

这样，定义了字段project的所有内容都将显示为allProject { ... }，其中任何其他json文件都将显示为allJson { ... }

{
  allProject {
    nodes {
      project
    }
  }
}

{
  "data": {
    "allProject": {
      "nodes": [
        {
          "project": "project1"
        },
        {
          "project": "project2"
        }
      ]
    }
  }
}

Answer 2

我的项目工作原理非常相似。这是我设置gatsby-config.js的方式：

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'project',  // Identifier. Will then be queried as `allProjectsJson`
        path: './data',   // Source folder containing the JSON files
      },
    },
    ...,
  ]
};

示例JSON文件：

[
  {
    "title": "Hello",
    "description": "World",
    "url": "https://www.google.com",
    "image": "./images/img1.jpg"
  },
  {
    "title": "World",
    "description": "Hello",
    "url": "https://www.google.com",
    "image": "./images/img2.jpg"
  },
]

查询示例：

query projects {
  allProjectsJson {
    edges {
      node {
        id
        title
        description
        url
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

希望这会有所帮助！

GraphQL查询访问子目录下文件夹中的所有已转换json文件

2 个答案: