web-dev-qa-db-ja.com

GraphQLを使用してフォルダー内のすべての画像をクエリする

私は現在、補足技術としてGatsby.jsとGraphQLを学習しており、クエリに悩まされています。フォルダーからすべての画像をクエリし、それらをマップして、グリッドとして反応コンポーネントに表示したいと思います。私はgatsby-source-filesystemを使用していますが、具体的にそのフォルダーに対処し、そこからすべての画像を取得する方法を理解できません。

ソースファイルシステム用にセットアップした私のプラグインは次のようになります。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/posts`,
    name: 'posts',
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/assets/images`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `photos`,
    path: `${__dirname}/src/assets/photos`,
  },
},

私の画像はsrc/assets/photosにあります

助けてくれてありがとう！

reactjsgraphqlgatsby
12
Dimitry Ivashchuk

Graphqlのフィルターを使用して特定のフォルダーを選択できます。

次のようなものを試してください：

query AssetsPhotos {
  allFile(filter: {extension: {regex: "/(jpg)|(jpeg)|(png)/"}, relativeDirectory: {eq: "photos"}}) {
    edges {
      node {
        id
        name
      }
    }
  }
}

どこ eq: photosは、GraphiQLに移動してallFileに対してクエリを実行するときに、対象とするファイルに対して取得する相対ディレクトリの結果に変更する必要があります。

8
Michael McQuade

plugin docs に記載されているように、gatsby-source-filesystemプラグインを使用する場合はsourceInstanceNameを使用します。

あなたのgatsby-config.js

{
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/content/legal`,
    name: "legal", // IMPORTANT: the name of your source instance
  },
}, {
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/content/blog`,
    name: "blog",
  },
}

次に、filterおよびsourceInstanceNameを使用して、GraphQLクエリで直接アドレス指定できます。

export const query = graphql`
{
  allFile(filter: {
      extension: {eq: "png"},
      sourceInstanceName: {eq: "blog"}
    })
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

relativeDirectoryとは対照的に、この方法では、プロジェクトなどをリファクタリングする可能性がある相対パスの変更に対処する必要がありません。 GraphQLで処理してください！

0
EliteRaceElephant