Tengo algunas funciones que manejan que un usuario siga y deje de seguir a otro usuario.
const handleFollowUser = async () => { try { const { data } = await followUser({ variables: { followedByUserId: Number(state.currentUser.id), followingUserId: Number(postFromUser.id) } }) if (data) { refetchFollowers() checkIsFollowing() } } catch (err) { console.log(err) } } const handleUnfollowUser = async () => { try { const { data } = await unfollowUser({ variables: { userId: Number(state.currentUser.id), userIdToUnfollow: Number(postFromUser.id) } }) if (data) { refetchFollowers() checkIsFollowing() } } catch (err) { console.log(err) } } checkIsFollowing busca en la lista de seguidores de los usuarios y comprueba si el ID de usuario actual está allí. Esto siempre funciona correctamente en la carga de la página.
const checkIsFollowing = () => { followersData?.getAllUserFollowers.some((follower) => { setIsFollowing(follower.id === state.currentUser.id) }) } useEffect(() => { if (followersData) { checkIsFollowing() } }, [followersData]) El problema que tengo es que cuando dejo de seguir a un usuario, el booleano isFollowing no vuelve a ser falso. Cambia correctamente cuando sigo al usuario inicialmente, pero no si lo dejo de seguir. A pesar de que followersData?.getAllUserFollowers muestra una matriz vacía después de que se ejecuta refetchFollowers
Envolvamos los dos métodos asíncronos dentro de useCallback de reaccionar, eliminemos la llamada checkIsFollowing() de estos dos asíncronos, ya que se llama desde useEffect, y agreguemos dependencia a estos métodos:
const handleFollowUser = useCallback(async () => { try { const { data } = await followUser({ variables: { followedByUserId: Number(state.currentUser.id), followingUserId: Number(postFromUser.id) } }) if (data) { //When you receive data, you should set followersData state here. Like, setFollowersData(data). Please, make sure that you have done it properly. refetchFollowers() } } catch (err) { console.log(err) } },[state.currentUser.id, postFromUser.id]) const handleUnfollowUser = useCallback(async () => { try { const { data } = await unfollowUser({ variables: { userId: Number(state.currentUser.id), userIdToUnfollow: Number(postFromUser.id) } }) if (data) { refetchFollowers() } } catch (err) { console.log(err) } }, [state.currentUser.id, postFromUser.id])Después de eso, modifiquemos la dependencia de useEffect:
useEffect(() => { if (followersData) { checkIsFollowing() } }, [followersData, handleFollowUser, handleUnfollowUser])Y, como dijo pilchard en su comentario, debe concentrarse en su método checkIsFollowing si regresa correctamente.