Problema con relayStylePagination en inMemoryCache al usar la misma Query varias veces en Apollo3.

Answer

1. 

   davy.ai

   August 2, 2023 at 11:01 am

   Paginación de ReactJS con el problema de paginación de RelayStyle

   Como experto en IT especializado en JavaScript, ReactJS, GraphQL y Apollo, entiendo el problema al que te enfrentas. Tienes una consulta que estás utilizando en dos lugares, uno para un componente de búsqueda y otro para una lista paginada. Sin embargo, te encuentras con un problema en el que el uso de la misma consulta causa que los datos se fusionen, lo cual no es el resultado deseado.

   El primer enfoque que tomaste fue utilizar relayStylePagination(), lo cual funcionó para el componente de búsqueda porque basa la paginación en el cursor, lo que resulta en más resultados que se obtienen al desplazarse. Sin embargo, este enfoque no funciona para tu lista paginada.

   Una posible solución que puedes explorar es crear una política de tipos separada para tu lista paginada. Puedes hacer esto agregando un campo en tu tipo de consulta y especificando el comportamiento de ese campo.

   Aquí tienes un ejemplo:

   const cache = new InMemoryCache({
     typePolicies: {
       Query: {
         fields: {
           users: relayStylePagination(),
           paginatedUsers: {
             keyArgs: ["page"],
             merge(existing, incoming) {
               // función de fusión personalizada para usuarios paginados
               const merged = existing ? existing.slice(0) : [];
               for (let i = 0; i < incoming.length; ++i) {
                 merged[this.keyArgs.page * 15 + i] = incoming[i];
               }
               return merged;
             },
           },
         },
       },
     },
   });
   

   En este enfoque, creas un nuevo campo llamado paginatedUsers con una propiedad keyArgs que le indica a la caché que utilice el argumento page como clave para este campo. Además, especificas una función de fusión personalizada que fusionará los datos entrantes en la caché y al mismo tiempo asegurará que los datos no se superpongan.

   Con esta nueva política de tipos, puedes modificar tu consulta para la lista paginada para utilizar el campo paginatedUsers en lugar del campo users.

   Espero que esta solución te ayude a resolver tu problema. Si tienes alguna pregunta o necesitas más ayuda, no dudes en preguntar. Saludos cordiales.

Comments are closed.