Mise à jour image profil sans rechargement de page (React/Next.js)

Question

Bonjour, J'ai ajouté 2 API ( posts et posts/edit ) pour mettre à jour ma base de données avec l'URL (profile du user) pour avoir la bonne image devant mes threads. Cela fonctionne, mais j'ai le même problème que dans le cours, à savoir que ça ne change pas l'image après avoir validé le formulaire. Il faut que j'actualise la page pour que ça me charge la nouvelle image devant chaque thread. Comment puis-je résoudre le problème ? Pour le user, Louis-Nicolas est allé dans le callback, mais je n'arrive pas avec les posts... "use client"; import ConnectedLayout from "@/components/ConnectedLayout/ConnectedLayout"; import { useParams, useRouter } from "next/navigation"; import Image from "next/image"; import Post from "@/components/Post/Post"; import { useEffect, useState } from "react"; import { toast } from "react-toastify"; import { useSession } from "next-auth/react"; import { createPortal } from "react-dom"; import Button from "@/components/Button/Button"; import { checkUrl } from "@/utils/checkUrl"; export default function Profile() { // Variable const params = useParams(); // we can use it in "client" page const pseudo = params.pseudo.slice(3); //%43pseudo => pseudo const router = useRouter(); // we are in "client" so we can use it const { data: session } = useSession(); // State const [user, setUser] = useState([]); const [posts, setPosts] = useState([]); const [profileInput, setProfileInput] = useState(""); //url profile picture const [bioInput, setBioInput] = useState(""); const [linkInput, setLinkInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const [openModale, setOpenModale] = useState(false); useEffect(() => { if (!pseudo) { router.push("/"); } fetchUserDataPosts(); }, []); // empecher le scroll de la page useEffect(() => { if (openModale) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "unset"; } }, [openModale]); // Functions // if we press "Modifier le profil" then we execute edit const edit = async () => { // fill the state setProfileInput(user.profile); setBioInput(user.bio); setLinkInput(user.url); setOpenModale(true); }; // we execute editUser after clicking on "Terminer" const editUser = async () => { if (isLoading) return; setIsLoading(true); // Verify the new profile url(profileInput) if we change the profile pic if (profileInput && !checkUrl(profileInput)) { toast.error("Vous devez entrer une url valide"); return; } // we call the api to update the db with the new url profile, bio or url website const response1 = await fetch("/api/user/edit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pseudo: pseudo, profile: profileInput, bio: bioInput, url: linkInput, }), }); // const data = await response1.json(); if (!response1.ok) { setIsLoading(false); toast.error("Une erreur est survenue"); return; } const newUser = { ...user, profile: profileInput, bio: bioInput, url: linkInput, }; // We will call api to update the "posts" database with the new profile pic const response2 = await fetch("/api/posts/edit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pseudo: pseudo, profile: profileInput, }), }); const dataPosts = await response2.json(); if (!response2.ok) { setIsLoading(false); toast.error("Une erreur est survenue"); return; } { /* FIN NOUVEAU CODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */ } setUser(newUser); setOpenModale(false); setIsLoading(false); toast.success("profile mis à jour"); //setPosts(dataPosts.posts); }; const fetchUserDataPosts = async () => { const response = await fetch("/api/user", { //we can use fetch because we are in a client component method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ pseudo }), }); const data = await response.json(); if (!response.ok) { toast.error("une erreur est intervenue"); } // if the user in the url do not exist that will generate an error so we want to redirect to "/" to avoid a bug if (!data.user) { router.push("/"); return; // to stop the program } // We ask the api to send all the posts from db to display the new profile pic const response2 = await fetch("/api/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pseudo: pseudo, }), }); const dataPosts = await response2.json(); if (!response2.ok) { setIsLoading(false); toast.error("Une erreur est survenue"); return; } // fill the state setPosts(dataPosts.posts); setUser(data.user); }; return ( {/* MODAL to modify the profile */} {openModale && createPortal( { if (e.target === e.currentTarget) { // if we click outside the "modale-foreground" ("modale-background" is the parent) setOpenModale(false); } }} > {/* Profile picture */} Photo de profil setProfileInput(e.target.value)} /> {/* Bio */} Bio { setBioInput(e.target.

Louis-Nicolas Leuillet · Accepted Answer

Oui tout à fait vous pouvez faire comme ceci. Vous pouvez aussi renvoyer les articles une fois que vous en modifiez un, mais cela dépend de comment vous gérez votre site. Dans l'ensemble, moi je modifierai mon state avec mes posts en modifiant le post que j'ai modifié (ça fait beaucoup de fois "modifié" 😇). Ceci m'éviterait d'appeler encore une API pour récupérer mes posts.

autof · Answer

Re bonjour,
Dans l'attente de votre réponse j'ai essayé d'employer revalidatePath() comme dans la partie18 chap6 mais ca ne fonctionne pas non plus j'ai ce message d'erreur : (ici "test" est mon pseudo)
Uncaught (in promise) Error: Invariant: static generation store missing in revalidatePath /@test
le cache ne semble pas se mettre a jour vu que mes photos de threads sont differentes de ma photo de profil (comme dit précedemment il me faut recharger la page pour que mes photos se mettent à jour).
En creusant un peu dans la doc concernant le message d'erreur il est dit "
Common Causes
Improper Usage Context : The revalidatePath function should be used within a server action. If you attempt to call it from a client component or outside the appropriate context, you may encounter this error
1
.
Or je suis dans un "use client" mais Louis Nicolas a aussi employé revalidatePath dans un "use client" cf. partie18 chapitre6....
Merci de m'éclairer sur tout ceci

Louis-Nicolas Leuillet · Answer

Hello Jean-Luc :)
En fait il faut forcer Next à chercher des informations nouvelles sur notre utilisateur. Essaye peut-être cette astuce :
const event = new Event("visibilityChange");
document.dispatchEvent(event);
Mets ce code après que ton api a été appelée. Avec ça tu devrais forcer Next à charger tes nouvelles informations car il pensera que tu auras changé d'onglet. En revanche cela dépend si tu as bien configuré Next-Auth.

autof · Answer

Bonjour, J'ai pas pu avec votre solution en revanche j'ai trouvé une solution malheureusement je ne suis pas certain qu'elle satisfasse aux bonnes pratiques. voila dans le formulaire de la modale je change l'url de l image(profile) une fois que je valide ma fonction editUser s'execute "response2" je récupere les posts mis à jour dans Mongodb puis je mets à jour le state contenant les posts. fichier de la page du pseudo contenant la modale "use client"; import ConnectedLayout from "@/components/ConnectedLayout/ConnectedLayout"; import { useParams, useRouter } from "next/navigation"; import Image from "next/image"; import Post from "@/components/Post/Post"; import { useEffect, useState } from "react"; import { toast } from "react-toastify"; import { useSession } from "next-auth/react"; import { createPortal } from "react-dom"; import Button from "@/components/Button/Button"; import { checkUrl } from "@/utils/checkUrl"; export default function Profile() { // Variable const params = useParams(); // we can use it in "client" page const pseudo = params.pseudo.slice(3); //%43pseudo => pseudo const router = useRouter(); // we are in "client" so we can use it const { data: session, status } = useSession(); // State const [user, setUser] = useState([]); const [posts, setPosts] = useState([]); const [profileInput, setProfileInput] = useState(""); //url profile picture const [bioInput, setBioInput] = useState(""); const [linkInput, setLinkInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const [openModale, setOpenModale] = useState(false); useEffect(() => { if (!pseudo) { router.push("/"); } fetchUserDataPosts(); }, []); // empecher le scroll de la page useEffect(() => { if (openModale) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "unset"; } }, [openModale]); // Functions // if we press "Modifier le profil" then we execute edit const edit = async () => { // fill the state setProfileInput(user.profile); setBioInput(user.bio); setLinkInput(user.url); setOpenModale(true); }; // we execute editUser after clicking on "Terminer" const editUser = async () => { if (isLoading) return; setIsLoading(true); // Verify the new profile url(profileInput) if we change the profile pic if (profileInput && !checkUrl(profileInput)) { toast.error("Vous devez entrer une url valide"); setIsLoading(false); // allow to submit again return; } // we call the api to update the db with the new url profile, bio or url website const response1 = await fetch("/api/user/edit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pseudo: pseudo, profile: profileInput, bio: bioInput, url: linkInput, }), }); const data = await response1.json(); if (!response1.ok) { setIsLoading(false); toast.error("Une erreur est survenue"); return; } const newUser = { ...user, profile: profileInput, bio: bioInput, url: linkInput, }; // We will call api to update the "posts" database with the new profile pic const response2 = await fetch("/api/posts/edit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pseudo: pseudo, profile: profileInput, }), }); const dataPosts = await response2.json(); if (!response2.ok) { setIsLoading(false); toast.error("Une erreur est survenue"); return; } //console.log(dataPosts); setPosts(dataPosts.newPosts); setUser(newUser); setOpenModale(false); setIsLoading(false); toast.success("profile mis à jour"); }; const fetchUserDataPosts = async () => { const response = await fetch("/api/user", { // we can use fetch because we are in a client component method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ pseudo }), }); const data = await response.json(); if (!response.ok) { toast.error("une erreur est intervenue"); } // if the user in the url do not exist that will generate an error so we want to redirect to "/" to avoid a bug if (!data.user) { router.push("/"); return; // to stop the program } // We ask the api to send all the posts from db to display the new profile pic const response2 = await fetch("/api/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pseudo: pseudo, }), }); const dataPosts = await response2.json(); if (!response2.ok) { setIsLoading(false); toast.error("Une erreur est survenue"); return; } // fill the state setPosts(dataPosts.posts); setUser(data.user); }; return ( {/* MODAL to modify the profile */} {openModale && createPortal(

{ if (e.target === e.currentTarget) { // if we click outside the "modale-foreground" ("modale-background" is the parent) setOpenModale(false); } }} >

{/* Profile picture */}

Photo de profil

Mise à jour image profil sans rechargement de page (React/Next.js)

Formation Apprendre NextJS 16 en 2026