Estoy siguiendo este ejemplo para crear un blog con Gatsby.
A lo largo de este tutorial, la notación de asignación se usa así:
export default function Index({ data }) { const { edges: posts } = data.allMarkdownRemark return ( <div className="blog-posts"> {posts .filter(post => post.node.frontmatter.title.length > 0) .map(({ node: post }) => { return (...); })} </div> ) } La línea 2, que me parece una tarea de deconstrucción, me resulta confusa. ¿De qué diccionario estamos asignando las posts de valor de los edges clave? ¿Por qué podemos hacer referencia a posts más adelante sin hacer referencia a ellas usando la tecla de edges ?
Se ha topado con la desestructuración y la asignación a una nueva variable.
Puede encontrar los documentos aquí y desplazarse hacia abajo hasta Assigning to new variable names .
Lo que hace es que está declarando una nueva variable (en su caso, las posts denominadas que tienen el valor de data.allMarkdownRemark.edges .
La sintaxis puede parecer al revés, ya que los edges le dan valor a las posts y no al revés, pero creo que esto tiene sentido si lo piensas un poco.
Tenerlo así le permite cambiar de esto:
const { edges } = data.allMarkdownRemark
a esto:
const { edges: posts } = data.allMarkdownRemark
con cambios mínimos.