@SNina
Отчаянно пытаюсь научиться писать хорошие сайты

Как при выходе из личного кабинета обнулить пользователя в функции useSWR?

Пишу код на Next.js v.13. Для получения данных пользователя использую функцию SWR:
const fetcher = (url) => fetch( url, { credentials: "include" } ).then( res => res.json() );

export const useUser = () => {
  const { data, error, isLoading } = useSWR( `${ baseApi }getuser`, fetcher );

  return {  
    user: data,
    isLoading,
    error
  };

};

Потом получаю пользователя в компоненте UserIcon:
import { useUser } from "@/services/useUser";

export default function UserIcon() {
  const {user } = useUser();

  return (   
      <div >
        <span >{ user?.name.slice( 0, 1 ).toUpperCase() }</span>
      </div>   
    );
}

При выходе использую функцию Logout:
import { NextResponse } from "next/server"; 
import { useSWRConfig } from "swr";

const logout = async() => {
   let response = NextResponse.next();
   const { mutate } = useSWRConfig();

  axios.post( `${ baseApi }logout` )
    .then( res => {
      response.cookies.delete( "XSRF-TOKEN" );
    } );

    await mutate( `${ baseApi }getuser` );

    router.push( "/" );
  };

На бэке все срабатывает и пользователь выходит, а в браузере в куках все еще сохраняется XSRF-TOKEN, и пользователь тоже все еще сохраняется (в иконке показывается имя пользователя). И только при обновлении браузера пользователь становится undefined, как и должно быть. Как сделать, чтобы данные о пользователе обновлялись сразу при выходе, не дожидаясь перезагрузки браузера?
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
@SNina Автор вопроса
Отчаянно пытаюсь научиться писать хорошие сайты
Наконец-то нашла работающий вариант. В функции SWR:
const fetcher = (url) => fetch( url, { credentials: "include" } ).then( res => res.json() );

export const useUser = () => {
  const { data, error, isLoading, mutate } = useSWR( `${ baseApi }getuser`, fetcher );

  return {  
    user: data,
    isLoading,
    error,
    mutate
  };

};


В функции Logout:
const logout = async() => {
   let response = NextResponse.next();
   const { mutate } = useUser();

axios.post( `${ baseApi }logout` )
    .then( res => {
      response.cookies.delete( "XSRF-TOKEN" );
    } );

 mutate( null, { revalidate: false } );
 router.push( "/" );
  };

То есть, mutate нужно брать из функции useUser() и прописывать именно так mutate( null, { revalidate: false } );
Это у меня сработало
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы