Estoy tratando de renderizar todas las fotos de un directorio que se definirá en el frente de un archivo mdx llamado carouselPhotosDir. Pensé que para hacer esto, necesitaría consultar el campo frontmatter carouselPhotosDir de mdx específico. Luego, almacene eso en una variable y luego consulte allFile donde la ruta relativa es igual al campo frontmatter carouselPhotosDir que obtuve de la primera consulta. No estoy tan seguro de cómo hacer esto. Intenté hacer la consulta que ves a continuación, pero simplemente consultó todo. Probé la consulta con una ruta codificada que se define en el campo frontmatter y funcionó, por lo que la variable de la primera consulta no funciona. ¿La variable no está definida? Pensé que funcionaría de manera similar a la variable id.
export const pageQuery = graphql` query ProjectQuery($id: String, $carouselPhotosDir: String) { mdx(id: { eq: $id }) { id body slug frontmatter { title repo carouselPhotosDir } } allFile(filter: { relativeDirectory: { eq: $carouselPhotosDir } }) { edges { node { id name base childImageSharp { gatsbyImageData( placeholder: BLURRED layout: CONSTRAINED transformOptions: { cropFocus: CENTER, fit: COVER } ) } } } } } `; Example mdx frontmatter: --- title: blob author: JuanCarlos thumbnail: ./blob-thumbnail.png repo: https://github.com/blob/repo carouselPhotosDir: blob/carousel-photos order: 3 ---Respuesta corta: no puedes.
¿La variable no está definida?
Por cierto.
En GraphQL, los campos en cada "nivel" de la solicitud se ejecutan y resuelven en paralelo. En su ejemplo, mdx y allFile son campos del mismo tipo (el tipo de consulta raíz), por lo que se resolverán al mismo tiempo. Eso significa que cada consulta esencialmente no es consciente de la otra o de lo que resolvió la otra.
Si estaba usando algún cliente GraphQL como Apollo, puede usar algún tipo de composición para mezclar las consultas en el lado del cliente, pero no en este escenario donde las consultas se ejecutan en el tiempo de compilación.
Dicho esto, tienes dos opciones:
Cuando createPage una página para cada página de plantilla en el gatsby-node sabe qué mdx se está creando en ese momento, por lo que puede pasar la variable carouselPhotosDir como contexto (consulte https://www.gatsbyjs.com/docs/how-to /consulta-datos/página-consulta/ ). De esa manera, carouselPhotosDir se consultará en el gatsby-node pero se usará en la consulta de página/plantilla.
Utilice el filtrado de JavaScript en la plantilla una vez que se haya realizado la obtención de datos. Solo necesita filtrar entre allFile los datos de archivo el carouselPhotosDir específico para cada plantilla. Puede usar la misma variable pageContext que antes, pero no en una consulta de GraphQL, sino en un ciclo de filtrado de JavaScript para obtener el nodo específico de archivos.