Consultas en GraphQL desde React

Para poder ver los querys formateados, necesitamos una extensión llamada GraphQL, sino se ve gris feo.

Tengo una duda ¿Todos los querys que copie de GraphiQL los pego todos dentro de la misma constante query? o ¿defino mas constantes para pegar dentro los demás querys?

Excelente! Estoy usando este curso para crear un ecommerce real, y he logrado conectar Gatsby usando como fuente de datos la base de datos del ERP de mi empresa

super buen curso tenia problemas con los estilos pero ya los pude correguir con wrapPageElement y hasta el momento voy bien y pienso implementar mi propio Ecommerce
! Screenshot_2.png

Si quisiera guardar un array, como datos, ¿Donde lo guardaría?
Por ejemplo para llenar los elementos de un navbar recorriendolo con un for
[“Home”,“Blog”,“Contact”]

Consultas en GraphQL desde React

Los queries solamente se pueden ejecutar dentro de los archivos que están en la carpeta de ‘pages’ y tienen que ser exportados.

Vamos a conseguir esta información:

siteMetadata: {
  title: `Platziswag`,
  description: `El mejor swag de Platzi disponible para ti`,
  author: `@MiguelAngelRe28`,
},

En index.js dentro de ‘pages’:

import React from "react"
import { Link, graphql } from "gatsby"
import { Jumbo } from '../components/'
import { SEO } from "../components"

export const query = graphql`
  query GET_DESCRIPTION{
  allSite{
    edges{
      node{
        siteMetadata{
          description
        }
      }
    }
  }
}
`

const IndexPage = ({data}) => (
  <>
    <SEO title="Home" />
    <Jumbo description={data.allSite.edges[0].node.siteMetadata.description}/>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/gracias">Go to gracias</Link>
  </>
)

export default IndexPage

Y en Jumbo.js dentro de ‘components’:

import React from 'react'
import {StyledJumbo} from '../styles/components'

export default function Jumbo({description}) {
  return (
    <StyledJumbo>
      <div>
        <h2>¡Consigue el mejor swag exclusivo y especial de Platzi!</h2>
        <small>{description}</small>
      </div>
    </StyledJumbo>
  )
}

No es tan hot reloading la verdad…

tengo este error:

GraphQL Error There was an error while compiling your site’s GraphQL queries.
Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents:

• GET_DESCRIPTION

si alguien sabe como solucionarlo podria ayudarme. ya intente cambiar los nombres pero ninguno esta duplicado como el error menciona.

Esto es disruptivo esta parte de accesos con GraphQL

Es posible pasar variables como props para que un componente haga un query con ella?

Mi pana que brutal este curso

Que tan recomendable es abstraer las querys en archivos individuales ???

Desgraciadamente me exploto cuando importe el description de esa manera. El código es el mismo y me dio un error. Yo lo resolví usando los props de manera tradicionarl

	export default function Jumbo(props) {
    console.log(props);
    return (
        <StyledJumbo>
            <div>
                <h2>¡ Consigue el mejor swag exclusivo y especial de Platzi</h2>
                <small> {props.description.description} </small>
            </div>
        </StyledJumbo>
    )
}