Apollo Cache e Incremental Site Generation (ISG)

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!