Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

¿Qué hace diferente a Apollo Client?

5/16
Recursos

Aportes 5

Preguntas 2

Ordenar por:

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

¿Qué hace diferente a Apollo Client?

EL cliente de apollo nos permite tener un soporte relativamente sencillo a lao hora de hacer cache de los datos de una consulta a diferencia que con otras librerías, que a pesar de que se puede hacer, es muy difícil de hacer.

Si volvemos al **_app.tsx**, y vamos al cliente que hemos creado, veremos que podemos configurar nuestra instancia de **InMemoryCache** y enviar una serie de configuraciones:

const client = new ApolloClient({
  // ...
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        // en este campo de acá, podemos configurar que tipo de consultas guardamos en caché
        fields: {
          // en este caso, será un producto
          product: {
            read(_, { args, toReference }) {
              // retornamos la referencia a este producto
              return toReference({
                // para obtener un producto en el caché
                __typename: 'Product',
                // lo hacemos en base a un argumento id, que será como lo encontremos
                id: args?.id,
              })
            }
          }
        }
      }
    }
  }),
})

Con esto podemos tener una configuración inicial que nos va a permitir ejecutar consultas en caché, sin tener que realizar consultas innecesarias.

La combinación de graphql y react query puede ser un poco ambiguo, como bien dice Jonathan react query esta pensado para soluciones mas genericas de REST.

Quizas seria util armar custom hooks para remplazarlo, y quedarse solo con Apollo.

Si alguno está usando Next.js 15, por acá yo consideré lo siguiente: Al estar trabajando con server components, yo decidí aislar las consultas de graphql a través de unas apis hechas con el mismo Next.js; para consultar dichas apis, seguí usando Axios. Dejo por acá tanto la instancia Axios, como el cliente Apollo que use en las apis: ```js // app/utils/axios.ts import axios from "axios"; // NEXT_PUBLIC_API_URL viene del .env.local recuerda declararlo const clientAxios = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, headers: { "Content-Type": "application/json", }, }); export { clientAxios }; ``````js // app/utils/apolloServer.ts import { ApolloClient, InMemoryCache } from "@apollo/client"; //PLATZI_GRAPHQL_URL = https://api.escuelajs.co function createApolloClient() { return new ApolloClient({ uri: `${process.env.PLATZI_GRAPHQL_URL}/graphql`, cache: new InMemoryCache({ typePolicies: { Query: { // en este campo de acá, podemos configurar que tipo de consultas guardamos en caché fields: { // en este caso, será un producto product: { read(_, { args, toReference }) { // retornamos la referencia a este producto return toReference({ // para obtener un producto en el caché __typename: "Product", // lo hacemos en base a un argumento id, que será como lo encontremos id: args?.id, }); }, }, }, }, }, }), }); } export { createApolloClient }; ```Hay que crear un cliente aparte del provider, ya que las apis están en el servidor y no entra en el contexto del provider.

En lugar de utilizar la memoria en cache, creen que seria mejor utilizar getStaticProps o combinarlo con getStaticPaths de Next.js para tenerlo en memoria?.

Genial siempre me preguntaba cómo hacer esas consultas más optimas a nivel de cache.