¿Es posible actualizar o reemplazar el ID de una entrada en caché con un nuevo ID en Apollo Client?

Tengo una estación en mi aplicación. Aquí hay un ejemplo de objeto:

typescript

interface Estación {

  id: número; // autoincremental

  stationId: número; // esto es constante

  nombre: cadena;

  estado: 'en vivo' | 'borrador';

}

Al actualizar la estación, la stationId nunca cambiará, pero SQL autoincrementará el campo id. El estado de la estación también se actualizará a 'borrador'. Es decir:

const estaciónAnterior: Estación = { id: 1, stationId: 123456, nombre: 'Ejemplo de deletreo correcto', estado: 'en vivo', } //... a continuación, algo de SQL-fu const siguienteEstación: Estación = { id: 2, stationId: 123456, nombre: 'Ejemplo de deletreo correcto', estado: 'borrador', }

Apollo client no puede deducir que siguienteEstación debe reemplazar a estaciónAnterior, por lo que hay muchas mutaciones que requieren readQuery/readFragment.

Esperaba que hubiera una solución más sencilla, pero la complejidad surge del cambio de id. Si pudiera encontrar todas las referencias a su identificación de objeto en la caché de datos normalizados y actualizar esos campos. ¿Es algo así siquiera posible?

davy.ai

June 18, 2023 at 6:38 pm

Sí, es posible actualizar la caché en este escenario utilizando el cliente de Apollo. Puede utilizar el método cache.modify para actualizar directamente la caché con el nuevo objeto nextStation.

Aquí le mostramos un ejemplo de cómo puede utilizar cache.modify para actualizar la caché:

import { gql, useApolloClient } from '@apollo/client';

const UPDATE_STATION_MUTATION = gql`
  mutation UpdateStation($id: Int!, $name: String!, $status: String!) {
    updateStation(id: $id, name: $name, status: $status) {
      id
      stationId
      name
      status
    }
  }
`;

const Station = ({ station }) => {
  const client = useApolloClient();

  const handleUpdate = async () => {
    const { data } = await client.mutate({
      mutation: UPDATE_STATION_MUTATION,
      variables: {
        id: station.id,
        name: 'Ejemplo escrito correctamente',
        status: 'borrador',
      },
    });

    // Actualice la caché con el nuevo objeto de la estación
    client.cache.modify({
      id: client.cache.identify(station),
      fields: {
        id() {
          return data.updateStation.id;
        },
        name() {
          return data.updateStation.name;
        },
        status() {
          return data.updateStation.status;
        },
      },
    });
  };

  return (
    <div>
      <h3>{station.name}</h3>
      Estatus: {station.status}
      <button onclick="{handleUpdate}">Actualizar estación</button>
    </div>
  );
};

En este ejemplo, cache.modify se llama después de que se ejecuta la mutación. Encuentra el objeto de la estación en caché utilizando el método client.cache.identify y actualiza los campos id, name y status con los nuevos valores del objeto data devuelto por la mutación.

Utilizar cache.modify es una forma más eficiente de actualizar la caché en comparación con el uso de readQuery o readFragment. También simplifica el código y evita solicitudes innecesarias a la red.

es.davy.ai

¿Tienes una pregunta?

¿Es posible actualizar o reemplazar el ID de una entrada en caché con un nuevo ID en Apollo Client?

Answer

davy.ai