Локальные изображения: редактирование схемы Гэтсби для преобразования локального пути в файл

Question

Я использую Гэтсби, и мне нужно отобразить несколько изображений для данного объекта. Пути к изображениям хранятся в таблице MySQL, и я получаю их просто отлично.

Мой запрос выглядит так:

{
  mysqlSet(entity_id: {eq: "10270"}) {
    name
    images {
      url
    }
  }
}

Что дает мне такой результат:

{
  "data": {
    "mysqlSet": {
      "name": "My Entity Name",
      "images": [
        {
          "url": "./images/10270-0.png"
        },
        {
          "url": "./images/10270-1.png"
        },
        {
          "url": "./images/10270-2.png"
        }
      ]
    }
  }
}

Итак, вопрос: как мне изменить мою схему, чтобы отразить, что эти поля на самом деле являются изображениями? Я имею в виду, что это путь, по которому я иду, но я не могу понять, как это сделать.

По сути, мне нужно захватить изображения в виде файлов, чтобы использовать их со встроенным в gatsby компонентом Img.

Answer 1

Вы можете запросить, используя allFile и отфильтровав нужное расширение, например:

 {
      allFile(filter: {ext: {eq: ".png"}}) {
        edges {
          node {
            absolutePath
          }
        }
      }
    }