Плагин Airtable Gatsby Source с изображением Гэтсби - PullRequest
Новая
       21

Плагин Airtable Gatsby Source с изображением Гэтсби

0 голосов
/ 05 октября 2018

Итак, я использую gatsby-source-airtable для извлечения изображений из моего airtable-файла.

В моем гастби-конфиге я сопоставил столбец вложений как filenode:

mapping: {'image':fileNode},

В GraphiQL похоже, что плагины изображений gatsby работают Этот запрос: 

{
airtable(table: {
    eq: "table-1"
}, data: {
    slug: {
        eq: "test-1"
    }
}) {
    data {
        image {
            localFiles {
                childImageSharp {
                    fluid(maxWidth: 400) {
                        src
                    }
                }
            }
        }
    }
}

}

Предоставляет такой ответ: 

{
"data": {
    "airtable": {
        "data": {
            "image": {
                "localFiles": [{
                    "childImageSharp": {
                        "fluid": {
                            "src": "/static/08baa0d1735184a4d0dd141d90f564d4-28158c2eb0b0b748efeabc0ec551c623-7eb65.jpg"
                        }
                    }
                }]
            }
        }
    }
}

}

, а затем при переходе к этому источнику генерирует изображение и появляется в браузере.

Однако, когда я пытаюсь использовать это с gatsby-image: 

<Img fluid={post.data.image.localFiles.childImageSharp.fluid} />

    export const query = graphql query PostQuery {
    airtable(table: {
        eq: "table-1"
    }, data: {
        slug: {
            eq: "test-1"
        }
    }) {
        data {
            image {
                localFiles {
                    childImageSharp {
                        fluid(maxWidth: 400) { ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
}

, я получаю эту ошибку:

WebpackError: TypeError: Невозможно прочитать свойство 'Fluid' из неопределенного

Что я делаю не так?Любой помощник будет признателен

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

Запрос поля localFiles на image даст вам массив.Протестируйте запрос в GraphiQL:

Обратите внимание, что вам придется заменить фрагмент ...GatsbyImageSharpFluid (не поддерживается GraphiQL) другим полем, например src

airtable(table: {
  eq: "table-1"
}, data: {
  slug: {
    eq: "test-1"
  }
}) {
  data {
    image {
      localFiles {
        childImageSharp {
          fluid(maxWidth: 400) {
            src
          }
        }
      }
    }
  }
}

Вы должны получить что-то вроде: 

{
  "data": {
    "airtable": {
      "data": {
        "image": {
          "localFiles": [
            {
              "childImageSharp": {
                "fluid": {
                  "src": "/static/8a6a13a2664ef8330843b7855ad2c5e2/d278e/o.jpg"
                }
              }
            }
          ]
        }
      }
    }
  }
}

Как видите, localFiles - это массив, поэтому в вашем компоненте вы должны написать: 

<Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} />
0 голосов
/ 06 ноября 2018

Вы не передаете данные одному из компонентов изображения gatsby, поэтому он выдает ошибку.Попробуйте щелкнуть по страницам во время работы gatsby develop, чтобы увидеть, где это происходит.Кроме того, любые сообщения об ошибках или журнал будут полезны.

...