Tengo 3 listas de elementos (usuarios1, usuario2, usuarios3) que se muestran como elementos deslizantes. Cada elemento es un objeto. Un elemento se parece a:

 activity_status: "online" id: "62d0ca6b114db3d" is_favorite: false last_login_at: "2022-07-18T02:09:49.458Z" match_status: null review_count: 0

Uso useQuery para actualizar el estado de cada elemento en un control deslizante. Se parece a:

 const { data: users1, refetch: refetchUsers1, isLoading: isLoading1, } = useQuery( REACT_QUERY_KEYS.USER1, async () => { setIsLoading(false); const res = await getUsers1(LIMIT); return res?.items; }, { refetchOnWindowFocus: false, }, ); const { data: users2, refetch: refetchUser2, isLoading: isLoading2, } = useQuery( REACT_QUERY_KEYS.USER2, async () => { setIsLoading(false); const res = await getUsers2(LIMIT); return res?.items; }, { refetchOnWindowFocus: false, }, ); const { data: users3, refetch: refetchUsers3, isLoading: isLoading3, } = useQuery( REACT_QUERY_KEYS.USER3, async () => { setIsLoading(false); const res = await getUserNewMembers(LIMIT); return res?.items; }, { refetchOnWindowFocus: false, }, );

Pero hay un problema cuando un elemento puede aparecer en varias listas (deslizadores), y quiero que cuando edite el estado en el elemento (exp: is_favorite: false -> true) actualice automáticamente todas las versiones de ese elemento en todos los demás lista (control deslizante). Me recomendaron usar webSocket pero no sé exactamente cómo usarlo.