Apollo Cache e Incremental Site Generation (ISG)
Contenido del curso
Herramientas de GraphQL en el frontend
GraphQL y Next.js
Próximos pasos
Apollo Cache e Incremental Site Generation (ISG)
Contenido del curso
Apollo Cache e Incremental Site Generation (ISG)
Irving Juárez
Estudiante
Jhunior Eduardo Guevara Lázaro
Estudiante
Fernando José Aguilar Rivas
Estudiante
Franco Lorenzo
Estudiante
Heyner Javier Marmol Verbel
Estudiante
David Prado
EstudianteJhunior Eduardo Guevara Lázaro
Estudiante
Jhonny Córdova
EstudianteLo mejor es que el ISG es muy sencillo de activar
Tengo una pregunta teacher es recomendable ocupar ISG en una aplicación que tiene una entrada de datos masiva o solo se recomienda en aplicaciones que su entrada de datos es relativamente pequeña?
Hola Fernando la estrategia de renderizado depende de cuan frescos tienen que estar tus datos, y si esto te permite poder usar ISG, siempre es la mejor opción pensando en la performance y experiencia del usuario, recuerda que el fetching de datos se produce al momento del build y tene en cuenta que puedes regenerar la página con la opción de revalidate estableciendo un tiempo o haciéndolo ondemand
Yo tengo un problema al consumir una api de GraphlQL:
Al traer un listado de items: solamente consulto los campo necesarios, entre ellos "isLiked" y en el detalle traigo el objeto con campos adicionales.
Cuando realizo la mutación del campo "isLiked", se refleja en el cache del detalle pero no en el listado, cabe anotar que esta mutación la puedo realizar tanto en la vista del detalle como en el listado.
Adicionalmente el listado pierde el orden que tenía.
La mutación hace lo siguiente:
export const UseToggleLikeCharacter = (toggleLikeCharacterId) => { const mutation = gql` mutation ToggleLikeCharacter($toggleLikeCharacterId: ID!) { toggleLikeCharacter(id: $toggleLikeCharacterId) { id name status species type origin gender image comments { id content createdAt } isLiked } } ` return useMutation(mutation, { variables: { toggleLikeCharacterId }, update(cache, {data: {toggleLikeCharacter}}) { cache.modify({ id: 'ROOT_QUERY', fields: { characters: (existingCharacters) => { return existingCharacters.map(character => { if (character.id === toggleLikeCharacter.id) { character.isLiked = toggleLikeCharacter.isLiked } return character }) }, } } ) } }) } ```También he intentado actualizar el cache de otras formas pero todas tienen el mismo comportamiento dejo a continuación los otros ejemplos: ```js update(cache, {data: {toggleLikeCharacter}}) { cache.modify({ id: cache.identify({__typename: 'Character', id: toggleLikeCharacterId}), fields: { isLiked() { return toggleLikeCharacter.isLiked } } }) }) ``````js update(cache, {data: {toggleLikeCharacter}}) { cache.modify({ fields: { characters(existingCharacters = []) { const newCharacterRef = cache.writeFragment({ data: toggleLikeCharacter, fragment: gql` fragment NewCharacter on Character { id name species image isLiked } ` }) return existingCharacters.map(character => { if (character.id === toggleLikeCharacter.id) { return newCharacterRef } return character }) } } }) } ) ```Alguien que le haya pasado algo similar y me pueda echar una mano se lo agradecería
WOOOOOOOOOW!!... esto es ORO PURO!!!... ES IMPRESIONANTE como con unas pocas líneas de código puedes generar paginas ESTATICAS DINAMICAS DE MANERA AUTOMÁTICA!... TODO UN CRACK Jhonathan!
Aporte:
Si agregamos un nuevo avo(luego del log in) y estamos en la pagina de inicio (pages/index.ts) veremos que la cantidad de avocados no varia, esto se debe a que apollo maneja un cache muy estricto ya que no se hizo ningun cambio en la query no hay necesidad de hacer otra peticion.
Para solucionar este bug se debe enviar una configuracion a la peticion de apollo en donde se epecifica al cache que siempre se dirija primero a la red.
// Ignore cache para refrescar por completo nuestro contenido // al fin y al cabo con `revalidate` controlamos la frecuencia fetchPolicy: 'network-only',
Pero en produccion aun se mantiene el error debido a next, para eso se envia otra configuracion al momento de que la funcion getStaticPros devuelve su contenido y se le agrega un:
return { props: { products }, // Next.js intentará re generar la página cuando: // - Se visite este página // - Pasen al menos 5 minutos. revalidate: 5 * 60, }
Para el problema cuando se dirija a la pagina de un solo avocado pero me redirija a 404 se debe tener en cuenta la creacion de contenido de manera dinamica(ISG).
Para resolver esto enviamos una configuracion al metodo getStaticPaths para que cada vez que no encuentre un item lo vaya a buscar al servidor.
return { paths, // Pre-renderice las paginas anteriores y para toda nueva página nueva // intente generarla desde el servidor bajo demanda fallback: 'blocking', }
client/pages/index.ts
import type { GetStaticProps, InferGetStaticPropsType } from 'next' import Layout from '@components/Layout/Layout' import KawaiiHeader from '@components/KawaiiHeader/KawaiiHeader' import ProductList from '@components/ProductList/ProductList' import client from '@service/client' import { GetAllAvocadosDocument } from '@service/graphql' import type { AvocadoFragment } from '@service/graphql' export const getStaticProps: GetStaticProps<{ products: AvocadoFragment[] }> = async () => { try { const response = await client.query({ query: GetAllAvocadosDocument, // Ignore cache para refrescar por completo nuestro contenido // al fin y al cabo con `revalidate` controlamos la frecuencia fetchPolicy: 'network-only', }) if (response.data.avos == null) { throw new Error(`There was an error fetching the items`) } const products = response.data.avos as AvocadoFragment[] return { props: { products }, // Next.js intentará re generar la página cuando: // - Se visite este página // - Pasen al menos 5 minutos. revalidate: 5 * 60, } } catch (e) { console.log(e) return { notFound: true, } } } const HomePage = ({ products, }: InferGetStaticPropsType<typeof getStaticProps>) => { return ( <Layout title="Home"> <KawaiiHeader /> <ProductList products={products} /> </Layout> ) } export default HomePage
Esta clase esta notable. Muchas gracias!