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 3
Preguntas 2
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
}
}
Listo para subir el nivel con Next.Js y Graphql
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.