Contenido del curso
Herramientas de GraphQL en el frontend
GraphQL y Next.js
Próximos pasos
Consumiendo una API GraphQL con JS puro
David Rodriguez
studentContenido del curso
Consumiendo una API GraphQL con JS puro
David Rodriguez
student
Andres Alvarez Becerra
student
Rafael Soriano Ramírez
student
Juan Sebastian Espínola
student
Jhunior Eduardo Guevara Lázaro
student
Nery Alberto Cano Ortigoza
student
Cristian Contreras
student
Beatriz del Carmen Guzmán García
student
Jose Alberto Reyes Quevedo
student
Alfonso Neil Jiménez Casallas
studentBeatriz del Carmen Guzmán García
student
Carlos David Marciglia Gomez
student
Jair Neri
student
David Prado
student
Ulqernesh Karvenae
studentUlqernesh Karvenae
student
Juan Carlos Montilla Sánchez
studentAlfonso Neil Jiménez Casallas
student
Manuel Ramirez
student
Jonathan 🦑 Alvarez
teacher
Joseph Francisco De La Cruz Rivas
student
Carlos Miguel Orozco Vidaña
student
Celso Cardenas
studentNery Alberto Cano Ortigoza
studentJair Neri
student
Carlos Mauro Cárdenas Fernández
studentDiego Fernando Saavedra Lozano
studentUlqernesh Karvenae
student
Edwin Garcia Quiterio
student
Andrés Vega
student
Francisco Enrique Giménez Vera
studentJonathan 🦑 Alvarez
teacherJair Neri
studentCó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.