Urql Client | Made updater function in cacheExchange but cache is not updating

Question

I have made the small application using nextjs for frontend and a separate backend for requesting the data using apollo server.

My NavBar component is not displaying user after i am loggedin("/login") and redirected to the homePage("/"). I have already made updater function in cacheExchange, so when the user is loggedin it will update the isLoggedIn.

NavBar.tsx

import { useIsLoggedInQuery, useLogoutMutation } from "@/generated/generated";
import { Box, Flex } from "@chakra-ui/react";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";

interface navbarProps {}

const NavBar: React.FC = (props) => {
  const [{ fetching, data, stale: staleLoggedInUser, error }] =
    useIsLoggedInQuery();
  const [{ fetching: logoutFetching, stale, data: loginData }, logoutFunc] =
    useLogoutMutation();
  const router = useRouter();
  const handleLogout = () => {
    logoutFunc({});
  };

  let navData;
  if (fetching) {
    navData = null;
  } else if (
    data?.isLoggedIn.isLogged?.is &&
    data?.isLoggedIn.isLogged?.is == true
  ) {
    navData = (
      <Flex justifyContent={"flex-end"}>
        <Box>
          <Link href={"/"}>{data.isLoggedIn.isLogged.username}</Link>
        </Box>
        <Box ml={2}>
          <Link href={"/"} onClick={handleLogout}>
            Log Out
          </Link>
        </Box>
      </Flex>
    );
  } else {
    navData = (
      <Flex justifyContent={"flex-end"}>
        <Box>
          <Link href={"/login"}>Login</Link>
        </Box>
        <Box ml={2}>
          <Link href={"/register"}>Register</Link>
        </Box>
      </Flex>
    );
  }

  console.log("---------------", navData, data, fetching);
  return (
    // bgColor={"blackAlpha.400"}
    <Box padding={3} bgColor={"blackAlpha.300"}>
      {navData}
    </Box>
  );
};

export default NavBar;

This is my urql client setup.

import Wrapper from "@/components/Wrapper";
import {
  IsLoggedInDocument,
  IsLoggedInQuery,
  IsLoggedInResponse,
  LoginDocument,
  LoginMutation,
  LogoutMutation,
  RegisterMutation,
} from "@/generated/generated";
import "@/styles/globals.css";
import { CSSReset, ChakraProvider, ColorModeProvider } from "@chakra-ui/react";
import { Cache, QueryInput, cacheExchange } from "@urql/exchange-graphcache";
import type { AppProps } from "next/app";
import {
  Client,
  Provider,
  createClient,
  fetchExchange,
  mapExchange,
} from "urql";
import { devtoolsExchange } from "@urql/devtools";

function betterUpdateQuery<Result, Query>(
  cache: Cache,
  qi: QueryInput,
  result: any,
  fun: (r: Result, q: Query) => Query
) {
  return cache.updateQuery(qi, (data) => fun(result, data as any) as any);
}
const client = createClient({
  url: "http://localhost:4000/graphql",
  fetchOptions: {
    credentials: "include" as RequestCredentials,
  },
  exchanges: [
    devtoolsExchange,
    mapExchange({
      onError(error, operation) {
        console.log(
          "onError &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&",
          error,
          operation
        );
      },
      onOperation: (operation) => {
        console.log(
          "operation--------------------==-=-=-",
          operation.query,
          operation.key,
          operation.kind,
          operation
        );
      },
      onResult: (result) => {
        console.log(
          "result--------------------==-=-=-",
          result.data,
          result.error,
          result.operation,
          result
        );
      },
    }),
    cacheExchange({
      updates: {
        Mutation: {
          Logout: (_result, args, cache, info) => {
            console.log("################", _result, args, cache, info);

            betterUpdateQuery<LogoutMutation, IsLoggedInQuery>(
              cache,
              { query: IsLoggedInDocument },
              _result,
              () => {
                return {
                  isLoggedIn: {
                    isLogged: null,
                  },
                };
              }
            );
          },
          Register: (_result, args, cache, info) => {
            console.log("################", _result, args, cache, info);

            betterUpdateQuery<RegisterMutation, IsLoggedInQuery>(
              cache,
              { query: IsLoggedInDocument },
              _result,
              (result, query) => {
                if (result.Register.error) {
                  return query;
                } else {
                  return {
                    isLoggedIn: {
                      isLogged: {
                        is: true,
                        username: result.Register.user?.username,
                        id: result.Register.user?.id,
                      },
                    },
                  };
                }
              }
            );
          },
          Login: (_result, args, cache, info) => {
            console.log("################", _result, args, cache, info);

            betterUpdateQuery<LoginMutation, IsLoggedInQuery>(
              cache,
              { query: IsLoggedInDocument },
              _result,
              (result, query) => {
                return {
                  isLoggedIn: {
                    isLogged: {
                      is: true,
                      username: result.Login.user?.username,
                      id: result.Login.user?.id,
                    },
                  },
                };
              }
            );
          },
        },
      },
    }),
    fetchExchange,
  ],
});

function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <ColorModeProvider>
        <CSSReset />
        <Provider value={client}>
          <Wrapper>
            <Component {...pageProps} />
          </Wrapper>
        </Provider>
      </ColorModeProvider>
    </ChakraProvider>
  );
}

export default App;

And these are the mutation and query types

mutation Login($input : LoginInput!){
  Login(input: $input){
       error {
        status
        message
      }
    user{
      ...RegularUser
    }
  }
}

 query isLoggedIn {
  isLoggedIn{
    isLogged{
      is
      username
      id
    }
    error{
      status
      message
    }
  }
}

Snapshot of devTool,

Before Login After Login

Snapshot of devTool,

Before Login After Login

Cache is not updating but the results is coming from api

github Link