@firebase/firestore: Firestore (8.2.2): Error de transporte de webchannel de conexión: [objeto, Objeto] al intentar almacenar en caché en React Native.

Estoy tratando de almacenar en caché elementos que se obtienen de una base de datos de Firebase, estoy usando React Native.

Obtener y enviar datos funciona bien, el problema ocurre cuando intento almacenar en caché los datos.

Cuando se desconecta Internet, muestra el error:

@firebase/firestore: Firestore (8.2.2): Se produjo un error en el transporte del canal web: [object, Object]

al intentar almacenar en caché.

Para almacenar en caché, utilizo la biblioteca “@react-native-async-storage/async-storage”: “~1.15.0”.

En el siguiente código, obtengo los datos y los almaceno. Cuando se desconecta Internet, el producto se mantiene visible durante unos segundos y luego muestra el error y desaparece.

El comportamiento previsto para este código es que el elemento permanezca en pantalla incluso cuando no hay conexión a Internet.

¿Cómo puedo solucionar este problema? ¿O hay una mejor manera de solucionar el almacenamiento en caché?

async function getSelfMadeItems() { let lista = []; if (getIsConnected === true) { let snapshot = await firestore .collection("SelfMadeProducts") .where("UserUID", "==", user.uid) .orderBy("MadeOn", "asc") .limit(5) .get() .then(async (querySnapshot) => { querySnapshot.forEach((doc) => { lista.push({ MadeOn: doc.data().MadeOn.toDate().toDateString(), //ImageUri: doc.data().ImageUri, id: doc.id, }); }); try { const jsonValue = JSON.stringify(lista); if (!querySnapshot.empty) { await AsyncStorage.setItem("@SelfMade", jsonValue); } } catch (e) { console.log(e); } setproductsState(lista); }); } else { try { const ItemValue = await AsyncStorage.getItem("@SelfMade"); if (ItemValue !== null) { const jsonValue = await AsyncStorage.getItem("@SelfMade"); console.log("Json", JSON.parse(jsonValue)); } jsonValue != null ? setproductsState(JSON.parse(jsonValue)) : null; } catch (e) { console.log(e); } } }

davy.ai

July 21, 2023 at 12:44 am

El problema con la implementación actual de la caché es que depende del estado en línea (getIsConnected) para determinar si obtener los datos de Firestore o de AsyncStorage. Esto significa que cuando se desconecta el internet, el código intentará obtener los datos de AsyncStorage, pero como aún no se han almacenado en caché, no encontrará nada y no mostrará ningún elemento.

Para solucionar el problema, podemos modificar el código para que siempre intente obtener los datos de AsyncStorage primero y, si no están allí, intentar obtenerlos de Firestore. Esto garantiza que los datos almacenados en caché siempre se muestren cuando no haya conexión.

Aquí hay una versión actualizada de la función getSelfMadeItems:

async function getSelfMadeItems() {
  let list = [];
  try {
    const jsonValue = await AsyncStorage.getItem("@SelfMade");
    if (jsonValue !== null) {
      // Se encontraron datos almacenados en caché, úsalos
      list = JSON.parse(jsonValue);
      setproductsState(list);
      return;
    }
  } catch (e) {
    console.log(e);
  }

  // No se encontraron datos almacenados en caché, obtenerlos de Firestore
  const querySnapshot = await firestore
    .collection("SelfMadeProducts")
    .where("UserUID", "==", user.uid)
    .orderBy("MadeOn", "asc")
    .limit(5)
    .get();

  querySnapshot.forEach((doc) => {
    list.push({
      MadeOn: doc.data().MadeOn.toDate().toDateString(),
      //ImageUri: doc.data().ImageUri,
      id: doc.id,
    });
  });

  try {
    const jsonValue = JSON.stringify(list);
    if (!querySnapshot.empty) {
      await AsyncStorage.setItem("@SelfMade", jsonValue);
    }
  } catch (e) {
    console.log(e);
  }

  setproductsState(list);
}

En esta versión actualizada, primero intentamos obtener los datos de AsyncStorage. Si se encuentran, los utilizamos y retornamos temprano. De lo contrario, obtenemos los datos de Firestore y los almacenamos en caché usando AsyncStorage.

También se debe tener en cuenta que hemos eliminado la verificación de getIsConnected, ya que ya no es necesaria. En su lugar, confiamos en AsyncStorage para determinar si los datos están almacenados en caché o no.

Answer

davy.ai

July 21, 2023 at 12:44 am
El problema con la implementación actual de la caché es que depende del estado en línea (getIsConnected) para determinar si obtener los datos de Firestore o de AsyncStorage. Esto significa que cuando se desconecta el internet, el código intentará obtener los datos de AsyncStorage, pero como aún no se han almacenado en caché, no encontrará nada y no mostrará ningún elemento.

Para solucionar el problema, podemos modificar el código para que siempre intente obtener los datos de AsyncStorage primero y, si no están allí, intentar obtenerlos de Firestore. Esto garantiza que los datos almacenados en caché siempre se muestren cuando no haya conexión.

Aquí hay una versión actualizada de la función getSelfMadeItems:
```
async function getSelfMadeItems() {
  let list = [];
  try {
    const jsonValue = await AsyncStorage.getItem("@SelfMade");
    if (jsonValue !== null) {
      // Se encontraron datos almacenados en caché, úsalos
      list = JSON.parse(jsonValue);
      setproductsState(list);
      return;
    }
  } catch (e) {
    console.log(e);
  }

  // No se encontraron datos almacenados en caché, obtenerlos de Firestore
  const querySnapshot = await firestore
    .collection("SelfMadeProducts")
    .where("UserUID", "==", user.uid)
    .orderBy("MadeOn", "asc")
    .limit(5)
    .get();

  querySnapshot.forEach((doc) => {
    list.push({
      MadeOn: doc.data().MadeOn.toDate().toDateString(),
      //ImageUri: doc.data().ImageUri,
      id: doc.id,
    });
  });

  try {
    const jsonValue = JSON.stringify(list);
    if (!querySnapshot.empty) {
      await AsyncStorage.setItem("@SelfMade", jsonValue);
    }
  } catch (e) {
    console.log(e);
  }

  setproductsState(list);
}
```
En esta versión actualizada, primero intentamos obtener los datos de AsyncStorage. Si se encuentran, los utilizamos y retornamos temprano. De lo contrario, obtenemos los datos de Firestore y los almacenamos en caché usando AsyncStorage.

También se debe tener en cuenta que hemos eliminado la verificación de getIsConnected, ya que ya no es necesaria. En su lugar, confiamos en AsyncStorage para determinar si los datos están almacenados en caché o no.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

@firebase/firestore: Firestore (8.2.2): Error de transporte de webchannel de conexión: [objeto, Objeto] al intentar almacenar en caché en React Native.

Answer

davy.ai