Синтаксис GraphQL для доступа к файлу по относительному пути

Question

GatsbyJS документы приведите этот пример для доступа к файлу по относительному пути с помощью GraphQL:

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

Я просто не могу заставить это работать, и я не знаю почему.Я пробовал все виды различных синтаксисов, но запрос всегда возвращает ноль для имени файла.Это моя последняя попытка в Графике 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 узла File относится к каталогу, указанному вами в 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-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 достаточно для обеспечения уникальности файла.

Кроме того, вы также можете запросить узел File по его absolutePath.Это гарантирует, что файл уникален, хотя вам все равно нужно указать gatsby-source-filesystem, где он находится.

В случае, если вы хотите увидеть все файлы с одинаковым relativePath, этот запрос будет делать:

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