获取唯一文件

Question

GatsbyJS docs给出了使用GraphQL通过relativepath访问文件的示例：

export const query = graphql`
  query {
    fileName: file(relativePath: { eq: "images/myimage.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400, maxHeight: 250) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

我只是无法正常工作，也不知道为什么。我尝试了各种不同的语法，但查询始终为文件名返回null。这是我最近在Graph i QL中进行的尝试：

{
    fileName: file(relativePath: { eq: "./html.js" }) {
      id
    } 
}

我想念什么？如何通过相对路径访问文件？

阅读答案后进行编辑：

在我的gatsby-config.js中，有几个设置为可查询的路径：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images/`
  }
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/posts/`,
    name: "posts"
  }
},
....

当我查询pic.jpg（而不是images/pic.jpg）时，盖茨比如何知道我想要images/pic.jpg而不是posts/pic.jpg？这是如何唯一定义路径的？

Answer 1

“文件”节点的relativePath字段相对于您在gatsby-source-filesystem中指定的目录。

例如，假设我具有这样的目录结构：

root
  |--gatsby-config.js
  `--dirA
      |--fileA.md
      `--dirB
          |--fileB.md
          `--dirC
               `--fileC.md

在我的gatsby-config.js

中

{
  resolve: `gatsby-source-filesystem`
  options: {
    path: `${__dirname}/dirA`, <---- root/dirA
    name: `dir`,
  },
}

dirA中的文件将具有以下relativePath：

File      |  relativePath
---------------------------------
fileA.md  |  'fileA.md'
---------------------------------
fileB.md  |  'dirB/fileB.md'
---------------------------------
fileC.md  |  'dirB/dirC/fileC.md'

我可以这样查询fileC：

query {
  fileName: file(relativePath: {
    eq: "dirB/dirC/fileC.md"
  }) {
    id
  }
}

因此，在您的情况下，您可以将gatsby-source-filesystem指向html.js的父目录，并且该目录应该是可查询的。

获取唯一文件

如果我具有以下结构：

root
  |--gatsby-config.js
  |--dirD
  |   `--index.md
  `--dirE
      `--index.md

然后将gatsby-source-filesystem指向两个节点，现在有2个文件节点，它们具有相同的relativePath（index.md）。

在这种情况下，执行以下查询是不安全的：

query {
  fileName: file(relativePath: {
    eq: "index.md"
  }) {
    id
  }
}

因为它将返回满足过滤条件的第一个File节点（我不确定gatsby如何确定文件顺序，如果有人知道请分享！）。添加一些其他唯一过滤器会更安全。

例如，当我设置gatsby-source-filesystem时，可以指定一个name属性。该name将存储在“文件”节点上的sourceInstanceName字段中。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/dirE`,
    name: `dirE`,
  },
},

我可以这样查询它：

{
  file(
    relativePath: {
      eq: "index.md"
    },
    sourceInstanceName: {
      eq: "dirE"
    }
  ) {
    id
  }
}

我认为sourceInstanceName和relativePath的组合足以确保文件是唯一的。

或者，您也可以通过其absolutePath查询“文件”节点。这样就可以保证文件是唯一的，尽管您仍然需要告诉gatsby-source-filesystem文件在哪里。

如果您想查看所有具有相同relativePath的文件，此查询将执行以下操作：

query {
  allFile(filter: {
    relativePath: { eq: "index.md" }
  }) {
    edges {
      node { 
        id
      }
    } 
  }
}

Answer 2

让我大吃一惊的是，对于this issue，您需要重新启动gatsby develop才能刷新GraphQL数据（即，在调整relativePath之后）。

这可以通过以下方式解决：

以ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop开始盖茨比
每次要刷新数据时，都在单独的终端中运行curl -X POST localhost:8000/__refresh

GraphQL语法按相对路径访问文件

2 个答案:

获取唯一文件