Consultas en GraphQL desde React

Clase 15 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Resumen

En la clase anterior aprendimos cómo consultar la información que nos proveen los plugins de fuente de datos desde GraphQL. Ahora, vamos a hacerlo desde nuestras vistas en React.

Debemos importar graphql desde gatsby:

// src/pages/NuestroPage.js
import { graphql } from 'gatsby';

Exportar nuestra consulta con el nombre de query:

// src/pages/NuestroPage.js
export const query = graphql`
  query NUESTRA_CONSULTA {
    # ...
  }
`;

Y consumir la información de la propiedad data que obtenemos automáticamente en el componente de nuestra página:

// src/pages/NuestroPage.js
export default function NuestroPage({ data }) {
  console.log(data.allSite.edges[0].node.siteMetadata);

  return /* ... */;
}

Recuerda que solo podemos hacer estas consultas en los componentes página de nuestra aplicación, es decir, solo desde los archivos dentro de src/pages/.

David Behar

student•

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

Duvan Carvajal

student•

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?

Jose Carlos Correa

teacher•

Tienes que colocarlos todos dentro de la constante query, Gatsby busca en las páginas esta constante/variable y sabe que debe ejecutar este query para inyectar el resultado en las props, esta es la razón del por que NO deberías tener más variables.

Incluso esto está bien en Graphql por qué el nombre de los query puede ayudar a distinguir entre ellos.

Carlos Morán

student•

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

GEORGIE WLADIMIR DUARTE CADENAS

student•

que es el ERP? estoy evaluando esa opcion pero me preocupa lo de actualizar y re-build que debo hacer cada vez que actualice algo. como te fue?

Irungaray Agustin

student•

ejercito revolucionario del pueblo (?

Fabián andres Pedraza Borhorquez

student•

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

Enzo Aliatis

student•

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"]

Jonathan Alfonso

student•

No puedo acceder a los datos de los componentes de Strapi. Estoy usando Strapi para la administración de contenido de una web que estoy creando con Gatsby. El problema es que no puedo acceder a los datos de los componentes, aunque si al resto de los datos de las colecciones. ¿Alguien tiene idea porque puede suceder esto? Adjunto un par de capturas para que vean como se ven los datos de Strapi en la api pero no en GraphQL.

Juan David Pino Reyes

student•

Una pregunta, si quiero implementar otra consulta adicional de graphql en el mismo archivo, toda la información se carga en los props en la propiedad data ? o como es el manejo en ese caso

Johan Stivens Suarez Galindo

student•

Otra duda, ¿dónde consigues esos stickers tan fabulosos de tu lap? xD

JuanFe Peralta

Team Platzi•

Usualmente esos stickers se dan en conferencias o eventos del mundo tech. Aunque también los puedes conseguir por internet. He visto que en Aliexpress los venden. :)

Enrique Devars

teacher•

Puedes obtener tu swag de Gatsby aquí ;)

https://store.gatsbyjs.org/

Miguel Angel Reyes Moreno

student•

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}/>
    <h2>Hi people</h2>
    <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>
        <h3>¡Consigue el mejor swag exclusivo y especial de Platzi!</h3>
        <small>{description}</small>
      </div>
    </StyledJumbo>
  )
}

Cristian Hernández

student•

No es tan hot reloading la verdad...

jose ortiz

student•

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.

jose ortiz

student•

dejo mi repo por si alguien puede ayudar

Jose Carlos Correa

teacher•

Este error es en Graphiql o en el cli del proyecto?

Jean Nuñez

student•

Esto es disruptivo esta parte de accesos con GraphQL

Pablo Maurig

student•

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

Alberto Camarena

student•

Si es posible, te recomiendo el curso de GraphQL en platzi donde enseñan mas a fondo todo eso.

Pedro Alejandro Silva Perez

student•

Mi pana que brutal este curso

Danny Rivadeneira

student•

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

Jorge Bou-saad

student•

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>
                <h3>¡ Consigue el mejor swag exclusivo y especial de Platzi</h3>
                <small> {props.description.description} </small>
            </div>
        </StyledJumbo>
    )
}

Consultas en GraphQL desde React

Introducción a Gatsby

¿Por qué Gatsby? Seguridad y Velocidad

¿Qué es Gatsby?

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

Requisitos previos y herramientas de desarrollo

Gatsby y Gatsby CLI y Starters

Configuración de ESLint

Fundamentos de Gatsby

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

Ecosistema de plugins

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

Router en Gatsby y Componente Link

Layout en Gatsby

Graphql en Gatsby

¿Cómo funciona GraphQL en Gatsby?

Accediendo a nuestros datos en Gatsby desde GraphQL

Queries, Edges (conexiones) y Nodos en Gatsby

Consultas en GraphQL desde React

Usando plugins en Gatsby

Instalación y configuración de plugins

Imágenes como fuente de datos

Plugins de transformación

Estilizando nuestros componentes con styled-components

Estilos Globales con styled-components

Stripe checkout

Introducción a la API de Stripe Checkout

Agregando productos a nuestra tienda en línea

Productos en React

Generando páginas programáticamente

Creando páginas en función de los datos

Manejo de Gatsby Templates

Terminando la Vista de Detalle de los Productos

StaticQuery vs. useStaticQuery

Construyendo el Carrito de Compras: useContext

Construyendo el Carrito de Compras: Vista

Construyendo el Carrito de Compras: Agregar productos al carrito

Comprando productos

Gatsby a producción

Gatsby build para compilar nuestro proyecto

Deploy a Netlify