No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci√≥n ūüĒ•

Aprende todo un fin de semana sin pagar una suscripci√≥n ūüĒ•

Regístrate

Comienza en:

0D
0H
41M
51S

Apollo Cache e Incremental Site Generation (ISG)

12/16
Recursos

Aportes 5

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Lo mejor es que el ISG es muy sencillo de activar

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!