Consumiendo una API GraphQL con JS puro
Contenido del curso
Consumiendo una API GraphQL con JS puro
Contenido del curso
David Rodriguez
Andres Alvarez Becerra
Rafael Soriano Ramírez
Juan Sebastian Espínola
Jhunior Eduardo Guevara Lázaro
Nery Alberto Cano Ortigoza
Cristian Contreras
Beatriz del Carmen Guzmán García
Jose Alberto Reyes Quevedo
Alfonso Neil Jiménez Casallas
Beatriz del Carmen Guzmán García
Carlos David Marciglia Gomez
Jair Neri
David Prado
Ulqernesh Karvenae
Ulqernesh Karvenae
Juan Carlos Montilla Sánchez
Alfonso Neil Jiménez Casallas
Manuel Ramirez
Jonathan 🦑 Alvarez
Profesor
Joseph Francisco De La Cruz Rivas
Carlos Miguel Orozco Vidaña
Celso Cardenas
Nery Alberto Cano Ortigoza
Jair Neri
Carlos Mauro Cárdenas Fernández
Josue David
Diego Fernando Saavedra Lozano
Ulqernesh Karvenae
Edwin Garcia Quiterio
Andrés Vega
Francisco Enrique Giménez Vera
Jonathan 🦑 Alvarez
ProfesorCó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 :)
Si alguien llega hasta este punto, debe saber que, aunque la API sigue en línea, la base de datos de PostgreSQL ya no está disponible.
Hice varias pruebas e intenté diferentes soluciones, y llegué a la conclusión de que ese es el problema. Las peticiones (requests) a la API funcionan correctamente, pero no devuelven datos porque la base de datos está caída.
Si vienen por la parte del frontend, les recomiendo lo siguiente:
cd0d759d96a83fbca8006d3cb1c629a2a21fd36b (basada en main). A partir de ese punto comienzan las clases donde se integra la API mediante fetch.http://localhost:4000. De esa manera podrán seguir las clases sin depender de la base de datos remota.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