Consumiendo una API GraphQL con JS puro
Contenido del curso
Herramientas de GraphQL en el frontend
GraphQL y Next.js
Próximos pasos
Consumiendo una API GraphQL con JS puro
Contenido del curso
Consumiendo una API GraphQL con JS puro
David Rodriguez
Estudiante
Andres Alvarez Becerra
Estudiante
Rafael Soriano Ramírez
Estudiante
Juan Sebastian Espínola
Estudiante
Jhunior Eduardo Guevara Lázaro
Estudiante
Nery Alberto Cano Ortigoza
Estudiante
Cristian Contreras
Estudiante
Beatriz del Carmen Guzmán García
Estudiante
Jose Alberto Reyes Quevedo
Estudiante
Alfonso Neil Jiménez Casallas
EstudianteBeatriz del Carmen Guzmán García
Estudiante
Carlos David Marciglia Gomez
Estudiante
Jair Neri
Estudiante
David Prado
Estudiante
Ulqernesh Karvenae
EstudianteUlqernesh Karvenae
Estudiante
Juan Carlos Montilla Sánchez
EstudianteAlfonso Neil Jiménez Casallas
Estudiante
Manuel Ramirez
Estudiante
Jonathan 🦑 Alvarez
Profesor
Joseph Francisco De La Cruz Rivas
Estudiante
Carlos Miguel Orozco Vidaña
Estudiante
Celso Cardenas
EstudianteNery Alberto Cano Ortigoza
EstudianteJair Neri
Estudiante
Carlos Mauro Cárdenas Fernández
EstudianteDiego Fernando Saavedra Lozano
EstudianteUlqernesh Karvenae
Estudiante
Edwin Garcia Quiterio
Estudiante
Andrés Vega
Estudiante
Francisco Enrique Giménez Vera
EstudianteJonathan 🦑 Alvarez
ProfesorJair Neri
EstudianteCó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 } }
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" },
la api de heroku está dada de baja, ¿se puede tomar otro recurso?
estoy en la misma
la pagina de heroku ya no esta activa
Hola, Nery. Acabo de reportar el problema. Apenas tenga respuesta te lo comento.
Cambió el dominio de Herokuapp a api.onrender
domains: ['platzi-graphql.herokuapp.com', 'localhost'],
domains: ['platzi-graphql-api.onrender.com', 'localhost'],
el link del back esta roto
confirmo :(
Cambió el dominio de herokuapp a api.onrender
domains: ['platzi-graphql.herokuapp.com', 'localhost'],
domains: ['platzi-graphql-api.onrender.com', 'localhost'],
Listo para subir el nivel con Next.Js y Graphql
segundo problema - uso node 16.13 , toca usar nvm...
puedes cambiar la version en el archivo Packge.json donde dice engines. Yo estoy usando la versión 18
"engines": { "node": "18.x" },```
a
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
Me has salvado de continuar con el curso 🤝🏼
este curso deben actualizarlo, por favor, Platzi, pónganse las pilas
Hola a todos, ha cambiado la url del server de GraphQL? La que se encuentra en recursos arroja un error
Hola Manuel,
Qué error te arroja? Un screenshot me ayudaría bastante :D
Me sucede lo mismo.
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
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.
git clone git@github.com:jonalvarezz/platzi-graphql-fullstack.git platzi-graphql-nextjs
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
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 :)
Actualización 🥲
URL :
Para los que buscan el recurso, cambio el dominio ahora es
Hola, Alguien del team Platzi que nos ayude a restablecer el link con el profesor ya que esta roto
Alguien sabe el tipo de fuente que utiliza el profesor?
Hola hola Francisco, aquí encuentras toda mi configuración: https://github.com/jonalvarezz/my-dot-files
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.