Mutating on visiting a page

Somehow I know what I have created is an abomination. I am trying to build a page that simply logs the user out. I am using Next app router + trpc + trpc's react-query wrapper.

First I want to address why I am using a client component and not a server component that logs the user out? Few reasons:
1. Can't set cookies in Next.js in server components
2. It will be a GET request, and my auth solution requires a POST (in order to receive Origin and Host headers)

"use client";

import { trpc } from "$/lib/trpc/client";
import { Spinner } from "@chakra-ui/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function LogoutPage() {
    const router = useRouter();
    const utils = trpc.useUtils();

    // Need to wrap in useState to ensure effect doesn't fire many times
    const [logout] = useState(
        trpc.auth.logout.useMutation({
            onSuccess: (data) => {
                router.push(data.redirectTo);
                router.refresh();
            },
            onSettled: () => {
                // Refetch current user
                utils.auth.getCurrentUser.invalidate();
            }
        })
    );

    useEffect(() => {
        logout.mutate();
    }, [logout]);

    return <Spinner />;
}

"use client";

import { trpc } from "$/lib/trpc/client";
import { Spinner } from "@chakra-ui/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function LogoutPage() {
    const router = useRouter();
    const utils = trpc.useUtils();

    // Need to wrap in useState to ensure effect doesn't fire many times
    const [logout] = useState(
        trpc.auth.logout.useMutation({
            onSuccess: (data) => {
                router.push(data.redirectTo);
                router.refresh();
            },
            onSettled: () => {
                // Refetch current user
                utils.auth.getCurrentUser.invalidate();
            }
        })
    );

    useEffect(() => {
        logout.mutate();
    }, [logout]);

    return <Spinner />;
}

Something about this feels off to me, especially using the useEffect. I'm also unclear why I need to wrap the useQuery in useState. Any suggestions for a better way?

TanStack•3y ago•

5 replies

brilliant-lime

Mutating on visiting a page

"use client";

import { trpc } from "$/lib/trpc/client";
import { Spinner } from "@chakra-ui/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function LogoutPage() {
    const router = useRouter();
    const utils = trpc.useUtils();

    // Need to wrap in useState to ensure effect doesn't fire many times
    const [logout] = useState(
        trpc.auth.logout.useMutation({
            onSuccess: (data) => {
                router.push(data.redirectTo);
                router.refresh();
            },
            onSettled: () => {
                // Refetch current user
                utils.auth.getCurrentUser.invalidate();
            }
        })
    );

    useEffect(() => {
        logout.mutate();
    }, [logout]);

    return <Spinner />;
}

"use client";

import { trpc } from "$/lib/trpc/client";
import { Spinner } from "@chakra-ui/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function LogoutPage() {
    const router = useRouter();
    const utils = trpc.useUtils();

    // Need to wrap in useState to ensure effect doesn't fire many times
    const [logout] = useState(
        trpc.auth.logout.useMutation({
            onSuccess: (data) => {
                router.push(data.redirectTo);
                router.refresh();
            },
            onSettled: () => {
                // Refetch current user
                utils.auth.getCurrentUser.invalidate();
            }
        })
    );

    useEffect(() => {
        logout.mutate();
    }, [logout]);

    return <Spinner />;
}

Something about this feels off to me, especially using the useEffect. I'm also unclear why I need to wrap the useQuery in useState. Any suggestions for a better way?

Mutating on visiting a page

Similar Threads

Mutating on visiting a page

Similar Threads

Similar Threads

Similar Threads