Consumiendo una API GraphQL con JS puro

Clase 2 de 16 • Curso de Next.js con GraphQL

David Rodriguez

student•

Código de la clase.

const query = `
  query{
    avos{
      id
      image
      name
      createdAt
      sku
      price
      attributes {
        description
        taste
        shape
        hardiness
      }
    }
  }
`

const baseURL = process.env.NEXT_PUBLIC_SERVICE_URL

const requester = (endpoint?: string, data?: Record<string, number | string>) =>
  fetch(`${baseURL}${endpoint}`,{
      method:'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
  })

const useAvocados = () => {
  const [data, setData] = useState<TProduct[]>([])
  const [status, setStatus] = useState<'success'| 'loading' | 'error' | 'idle'>('idle')

  useEffect(()=>{
    const fetchItems = async () => {
      setStatus('loading')
      try {
        const response = await requester('/graphql', { query })

        const { data } = (await response.json()) as { data: TProduct[]}
        setData(data)
        setStatus('success')
      } catch (error) {
        setStatus('error')
      }
    }
    fetchItems()
  }, [])

  return {
    data,
    status
  }

}

Andres Alvarez Becerra

student•

Hola, si estan usando una version de Node mayo a la 14, deben cambiarla en el archivo Packge.json donde dice engines, en mi caso quedó de la siguiente manera

"engines": {
    "node": "16.x"
  },

Rafael Soriano Ramírez

student•

la api de heroku está dada de baja, ¿se puede tomar otro recurso?

Juan Sebastian Espínola

student•

estoy en la misma

Jhunior Eduardo Guevara Lázaro

student•

Aquí hay otro recurso

Nery Alberto Cano Ortigoza

student•

la pagina de heroku ya no esta activa

Cristian Contreras

student•

Hola, Nery. Acabo de reportar el problema. Apenas tenga respuesta te lo comento.

Beatriz del Carmen Guzmán García

student•

Cambió el dominio de Herokuapp a api.onrender

domains: ['platzi-graphql.herokuapp.com', 'localhost'],

domains: ['platzi-graphql-api.onrender.com', 'localhost'],

Jose Alberto Reyes Quevedo

student•

el link del back esta roto

https://platzi-graphql.herokuapp.com/

Alfonso Neil Jiménez Casallas

student•

confirmo :(

Beatriz del Carmen Guzmán García

student•

Cambió el dominio de herokuapp a api.onrender

domains: ['platzi-graphql.herokuapp.com', 'localhost'],

domains: ['platzi-graphql-api.onrender.com', 'localhost'],

Carlos David Marciglia Gomez

student•

Listo para subir el nivel con Next.Js y Graphql

Jair Neri

student•

segundo problema - uso node 16.13 , toca usar nvm...

David Prado

student•

puedes cambiar la version en el archivo Packge.json donde dice engines. Yo estoy usando la versión 18

  "engines": {
    "node": "18.x"
  },```

Ulqernesh Karvenae

student•

Hola, si estan usando una version de Node mayo a la 14, deben cambiarla en el archivo Packge.json donde dice engines, en mi caso quedó de la siguiente manera

"engines": {
    "node": "16.x"
  },

Pd: este es el comentario de un compañero pero lo replico ya que me ayudo a solucionar la instalacion

Juan Carlos Montilla Sánchez

student•

Me has salvado de continuar con el curso 🤝🏼

Alfonso Neil Jiménez Casallas

student•

este curso deben actualizarlo, por favor, Platzi, pónganse las pilas

Manuel Ramirez

student•

Hola a todos, ha cambiado la url del server de GraphQL? La que se encuentra en recursos arroja un error

Jonathan 🦑 Alvarez

teacher•

Hola Manuel,

Qué error te arroja? Un screenshot me ayudaría bastante :D

Joseph Francisco De La Cruz Rivas

student•

Me sucede lo mismo.

Carlos Miguel Orozco Vidaña

student•

soy el unico que no le sale este error en home '/"? clone tal cual en la clase instale las dependencias but no home no me funciona, sin embargo otras rutas como "/cart" si funciona

Celso Cardenas

student•

Hola! Parece ser que lo que estamos clonando de Git, es el proyecto ya terminado (con todo lo que se verá de graphQL). El error que nos da, es porque está haciendo una solicitud a un backend que no tenemos.

Nery Alberto Cano Ortigoza

student•

git clone git@github.com:jonalvarezz/platzi-graphql-fullstack.git platzi-graphql-nextjs

Jair Neri

student•

Intente automatizar nvm , pero no logre hacer que funcionara ninguna de las configuraciones mencionadas en su doc.

Me encontre una alternativa mas comoda e inteligente Volta para gestionar y estandarizar dependencias Node, Yarn NPM por proyecto, sin tener que cambiar la version global cada que salto de un proyecto a otro u abro un terminal.

Les dejo el link a su doc https://docs.volta.sh/guide/getting-started

Carlos Mauro Cárdenas Fernández

student•

Siempre es bueno aislar nuestro proyectos de forma individual ya sea por entornos virtuales locales o dockeerizados. Antes que aventarse al entorno global :( esto lo hago desde que usaba nuevas ramas de actualizacionde linux. Super importante. :) buen dato por el link :)

Ulqernesh Karvenae

student•

Ulqernesh Karvenae

student•

URL :

Edwin Garcia Quiterio

student•

Para los que buscan el recurso, cambio el dominio ahora es

Andrés Vega

student•

Hola, Alguien del team Platzi que nos ayude a restablecer el link con el profesor ya que esta roto

Francisco Enrique Giménez Vera

student•

Alguien sabe el tipo de fuente que utiliza el profesor?

Jonathan 🦑 Alvarez

teacher•

Hola hola Francisco, aquí encuentras toda mi configuración: https://github.com/jonalvarezz/my-dot-files

Jair Neri

student•

una duda el flag --cwd, no veo que sea una depeendencia es algo propio de yarn ?

Vi que es un paquete que tambien se puede instalar con npm para gestionar scripts en otros directorios en monorepos.

sebastian amilkar murillo hurtado

student•

Hola buen día, al iniciar el proyecto esta generando error 404 y al parecer esta haciendo una peiticion la cual no es existosa, ayuda por favor.

const query = `
  query{
    avos{
      id
      image
      name
      createdAt
      sku
      price
      attributes {
        description
        taste
        shape
        hardiness
      }
    }
  }
`

const baseURL = process.env.NEXT_PUBLIC_SERVICE_URL

const requester = (endpoint?: string, data?: Record<string, number | string>) =>
  fetch(`${baseURL}${endpoint}`,{
      method:'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
  })

const useAvocados = () => {
  const [data, setData] = useState<TProduct[]>([])
  const [status, setStatus] = useState<'success'| 'loading' | 'error' | 'idle'>('idle')

  useEffect(()=>{
    const fetchItems = async () => {
      setStatus('loading')
      try {
        const response = await requester('/graphql', { query })

        const { data } = (await response.json()) as { data: TProduct[]}
        setData(data)
        setStatus('success')
      } catch (error) {
        setStatus('error')
      }
    }
    fetchItems()
  }, [])

  return {
    data,
    status
  }

}

Consumiendo una API GraphQL con JS puro

Introducción

Arquitectura de nuestro frontend con GraphQL

Consumiendo una API GraphQL con JS puro

Herramientas de GraphQL en el frontend

Usando Axios y React Query

Usando Apollo Client

¿Qué hace diferente a Apollo Client?

#UnderTheHood: Tipos en las respuestas

Auto generación de código

GraphQL y Next.js

#UnderTheHood SSR con GraphQL en Next.js

Conectando páginas y Static Site Generation (SSG)

Autenticación y manejo de sesión

Operaciones con autenticación

Apollo Cache e Incremental Site Generation (ISG)

Próximos pasos

¿Qué quieres aprender? Ideas y retos

Suscripciones

Desventajas de GraphQL en el frontend

Sigue profundizando en Next.js