He creado una función que agrega un elemento específico a mi diario. 9/10 veces todo funciona, lo que significa que no hay nada malo con el código?
Sin embargo, rara vez agrego el elemento a mi diario, pero no veo los valores actualizados, aunque activé el método queryClient.invalidateQueries() , el valor se actualiza en mi servidor, porque cuando actualizo manualmente veo el diario actualizado nuevamente .
¿Significa esto que en el momento en que activo el método invalidatequeries, la actualización no ha llegado a mi servidor y es por eso que veo datos obsoletos? Pero, ¿qué haría yo en ese caso?
Aquí está la función:
const newAddItemFunction = () => { const day = newDiary?.[currentDay]; if (day && selectedMealNumber && selectedItem) { setSavingItem(true); NewAddItemToDiary({ day, selectedMealNumber, selectedItem, }); queryClient.invalidateQueries(["currentDiary"]).then(() => { toast.success(`${selectedItem.product_name} has been added`); }); router.push("/diary"); } };Aquí está mi gancho personalizado (useFirestoreQuery es solo un gancho useQuery envuelto personalizado para firebase):
export const useGetCollectionDiary = () => { const user = useAuthUser(["user"], auth); const ref = collection( firestore, "currentDiary", user.data?.uid ?? "_STUB_", "days" ); return useFirestoreQuery( ["currentDiary"], ref, { subscribe: false, }, { select: (data) => { let fullDaysArray = [] as Day[]; data.docs.map((docSnapshot) => { const { id } = docSnapshot; let data = docSnapshot.data() as Day; data.documentId = id; fullDaysArray.push(data); }); fullDaysArray.sort((a, b) => a.order - b.order); return fullDaysArray; }, enabled: !!user.data?.uid, } ); };La función NewAddItemToDiary es solo una llamada de base de fuego para configurar el documento:
//...json calculations setDoc( doc( firestore, "currentDiary", auth.currentUser.uid, "days", day.documentId ), newDiaryWithAddedItem );9/10 veces todo funciona, lo que significa que no hay nada malo con el código?
Me indica que hay algo mal con el código que solo se manifiesta en casos extremos como condiciones de carrera.
No ha compartido el código de lo que está haciendo NewAddItemToDiary , pero supongo que es un código asíncrono que desencadena una mutación. Si ese es el caso, parece que activa la mutación y luego invalida la consulta sin esperar a que finalice:
NewAddItemToDiary({ day, selectedMealNumber, selectedItem, }); queryClient.invalidateQueries(["currentDiary"]).then(() => { toast.success(`${selectedItem.product_name} has been added`); }); Las mutaciones en react-query tienen devoluciones de llamada como onSuccess o onSettled donde debería estar haciendo la invalidación o, si usa mutateAsync , puede await la mutación y luego invalidar. Así es como lo hacen todos los ejemplos en los documentos :
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key const mutation = useMutation(addTodo, { onSuccess: () => { queryClient.invalidateQueries('todos') queryClient.invalidateQueries('reminders') }, })