Apollo Cache e Incremental Site Generation (ISG)

Clase 12 de 16 • Curso de Next.js con GraphQL

Clase anteriorSiguiente clase

Irving Juárez

student•

Lo mejor es que el ISG es muy sencillo de activar

Jhunior Eduardo Guevara Lázaro

student•

Fernando José Aguilar Rivas

student•

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?

Franco Lorenzo

student•

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

Heyner Javier Marmol Verbel

student•

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

David Prado

student•

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!

Jhunior Eduardo Guevara Lázaro

student•

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

Jhonny Córdova

student•

Esta clase esta notable. Muchas gracias!

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

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,
      }

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

Apollo Cache e Incremental Site Generation (ISG)

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