Hola compañeros, les dejo el link al repo https://github.com/jonalvarezz/platzi-graphql-fullstack
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
Aportes 11
Preguntas 6
Hola compañeros, les dejo el link al repo https://github.com/jonalvarezz/platzi-graphql-fullstack
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
}
}
En vista que la api de avocados no funciona actualmente, estaré usando la api de platzi pero orientada a graphql : link
Pueden entrar y hacer sus peticiones de graphql(queries):
query{
products{
id
title
price
}
}
Mutations:
mutation{
addProduct(data:{
title: "este es un titulo"
price: 22
description:"esta es una descripcion"
categoryId:4
images: [
"https://api.lorem.space/image/shoes?w=640&h=480&r=395"
]
}){
id
}
}
Señores debemos encontrar soluciones y adaptarnos a ellas… 💪
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"
},
Listo para subir el nivel con Next.Js y Graphql
la api de heroku está dada de baja, ¿se puede tomar otro recurso?
Alternativas para practicar mientras el Server de GraphQL usado en clase siga caído:
segundo problema - uso node 16.13 , toca usar nvm…
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
Aquí les dejo el comando para copiar y pegar:
git clone git@github.com:jonalvarezz/platzi-graphql-fullstack.git nextjs-graphql
rallos, solo habia usado npm… espero no me de muchos dolores yarn. ademas tenia una ext para ejecutar por atajos los comandos del package u.u
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.