La combinación de graphql y react query puede ser un poco ambiguo, como bien dice Jonathan react query esta pensado para soluciones mas genericas de REST.
Quizas seria util armar custom hooks para remplazarlo, y quedarse solo con Apollo.
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
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Jonathan Alvarez
Aportes 4
Preguntas 2
La combinación de graphql y react query puede ser un poco ambiguo, como bien dice Jonathan react query esta pensado para soluciones mas genericas de REST.
Quizas seria util armar custom hooks para remplazarlo, y quedarse solo con Apollo.
EL cliente de apollo nos permite tener un soporte relativamente sencillo a lao hora de hacer cache de los datos de una consulta a diferencia que con otras librerías, que a pesar de que se puede hacer, es muy difícil de hacer.
Si volvemos al **_app.tsx**
, y vamos al cliente que hemos creado, veremos que podemos configurar nuestra instancia de **InMemoryCache**
y enviar una serie de configuraciones:
const client = new ApolloClient({
// ...
cache: new InMemoryCache({
typePolicies: {
Query: {
// en este campo de acá, podemos configurar que tipo de consultas guardamos en caché
fields: {
// en este caso, será un producto
product: {
read(_, { args, toReference }) {
// retornamos la referencia a este producto
return toReference({
// para obtener un producto en el caché
__typename: 'Product',
// lo hacemos en base a un argumento id, que será como lo encontremos
id: args?.id,
})
}
}
}
}
}
}),
})
Con esto podemos tener una configuración inicial que nos va a permitir ejecutar consultas en caché, sin tener que realizar consultas innecesarias.
En lugar de utilizar la memoria en cache, creen que seria mejor utilizar getStaticProps o combinarlo con getStaticPaths de Next.js para tenerlo en memoria?.
Genial siempre me preguntaba cómo hacer esas consultas más optimas a nivel de cache.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?