No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

16 Días
12 Hrs
39 Min
48 Seg

Apollo Cache e Incremental Site Generation (ISG)

12/16
Recursos

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Lo mejor es que el ISG es muy sencillo de activar

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: ```js 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!