web-dev-qa-db-fra.com

Interroger toutes les images d'un dossier à l'aide de GraphQL

J'apprends actuellement Gatsby.js et GraphQL en tant que technologie supplémentaire et je suis resté coincé avec les requêtes. Je souhaite interroger toutes les images d'un dossier, les cartographier et les afficher dans un composant React sous forme de grille. J'utilise gatsby-source-filesystem mais je ne sais pas comment adresser spécifiquement ce dossier et en obtenir toutes les images.

Mon plugin configuré pour le système de fichiers source ressemble à ceci.

{
  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`,
  },
},

J'ai mes images dans src/assets/photos

Merci pour toute aide!

reactjsgraphqlgatsby
12
Dimitry Ivashchuk

Vous pouvez sélectionner des dossiers spécifiques à l'aide de filtres dans graphql.

Essayez quelque chose comme ceci:

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

Où eq: photos doit être remplacé par le résultat du répertoire relatif que vous obtenez pour les fichiers que vous souhaitez cibler lorsque vous accédez à GraphiQL et exécutez une requête sur allFile.

8
Michael McQuade

J'aime utiliser sourceInstanceName lorsque j'utilise gatsby-source-filesystem plugin tel que documenté dans les plugin docs .

Votre 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",
  },
}

Vous pouvez ensuite les adresser directement dans votre requête GraphQL en utilisant filter et sourceInstanceName:

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

Contrairement à relativeDirectory, de cette façon, vous n'avez jamais à faire face à des chemins relatifs changeants, vous pouvez refactoriser votre projet ou autre chose. Laissez GraphQL s'en charger pour vous!

0
EliteRaceElephant