es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo estructuro una solicitud de recuperación después de otra?

Tengo un blog en React y estoy usando Firebase como back-end. Utilizo el método createUserWithEmailAndPassword y después de la autenticación, los usuarios son redirigidos al blog donde pueden comenzar a agregar publicaciones.

Almaceno sus publicaciones en una colección de Firestore llamada “posts”. No hay problema con eso.

También quiero crear un objeto de usuario después de iniciar sesión con las preferencias del usuario. Digamos que cada uno ha elegido un tema específico.

Creo una colección llamada “users” en Firestore y allí almacenaré el objeto de cada uno de ellos {user: "random@hotmail.com", theme: "dark", isAdmin: false, etc} utilizando el método addDoc.

Quiero que este objeto se cree solo una vez y no cada vez que un usuario inicie sesión.

¿Cómo verifico en esa colección “users” si el usuario ya existe?

Obtengo la colección getDocs(usersCollectionRef) y luego filtro los datos, digamos por una propiedad, para ver si hay ese objeto allí.

Y si no existe, quiero agregar el documento utilizando el método addDoc.

Esta es la solicitud:

“`
useEffect(() => {
const createUserData = async () => {
const data = await getDocs(usersCollectionRef);
const docs = data.docs.map((doc) => ({
…doc.data(),
id: doc.id,
}));
const userData = docs.filter((doc) => doc.user === user.email);

if (userData.length === 0) {
await addDoc(usersCollectionRef, {
user: user.email,
isAdmin: false,
theme: "dark",
});
}
};
if (user) {
createUserData();
}
}, [user, usersCollectionRef]);
“`

Parece que estoy intentando verificar y agregar a la colección al mismo tiempo y es por eso que no funciona.

¿Alguna idea?

¿Debería tener un paso intermedio donde guarde lo que estoy obteniendo de getDocs en un estado o algo similar y luego hacer la segunda solicitud?

¿Alguien puede explicarlo, por favor?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Sí, es mejor tener un paso intermedio donde almacenes los datos de getDocs en un estado o una variable antes de agregar el nuevo documento.

    Puedes modificar tu código de la siguiente manera:

    useEffect(() => {
      const createUserData = async () => {
        const data = await getDocs(usersCollectionRef);
        const docs = data.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id,
        }));
        const userData = docs.filter((doc) => doc.user === user.email);
    
        if (userData.length === 0) {
          const newUser = { user: user.email, isAdmin: false, theme: "dark" };
          await addDoc(usersCollectionRef, newUser);
          setUsers([...docs, newUser]);
        }
      };
      if (user) {
        createUserData();
      }
    }, [user, usersCollectionRef]);
    

    Aquí, he agregado un estado llamado users y lo he inicializado con los datos de getDocs. Luego, después de agregar un nuevo usuario, actualizo el estado añadiendo el nuevo usuario al arreglo existente docs, que contiene los datos de todos los usuarios.

    Al hacer esto, puedes evitar hacer solicitudes innecesarias al servidor y mejorar el rendimiento.

Comments are closed.