I commented my query out, but i still notice request are still been made. this is what my code look

import { useMemo, useCallback } from "react";
import Constants from "expo-constants";
import { useSupabaseClient } from "@supabase/auth-helpers-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink, loggerLink, httpLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import superjson from "superjson";

import type { AppRouter } from "@lumi/api";

/**
 * A set of typesafe hooks for consuming your API.
 */
export const api = createTRPCReact<AppRouter>();
export { type RouterInputs, type RouterOutputs } from "@lumi/api";


const getBaseUrl = () => {

  const debuggerHost = Constants.expoConfig?.hostUri;
  const localhost = debuggerHost?.split(":")[0];
  console.log("Localhost:", localhost); // Add logging

  if (!localhost) {
    // return "https://turbo.t3.gg";
    throw new Error(
      "Failed to get localhost. Please point to your production server.",
    );
  }
  return `http://${localhost}:3000`;
};

/**
 * A wrapper for your app that provides the TRPC context.
 * Use only in _app.tsx
 */
export const TRPCProvider = (props: { children: React.ReactNode }) => {
  const supabase = useSupabaseClient();

  const queryClient = useMemo(() => new QueryClient(), []);

  const getHeaders = useCallback(async () => {
    const headers = new Map<string, string>();
    headers.set("x-trpc-source", "expo-react");

    const { data } = await supabase.auth.getSession();
    const token = data.session?.access_token;
    console.log("called multiple times")
    if (token) headers.set("authorization", token);

    return Object.fromEntries(headers);
  }, [supabase]);

  const trpcClient = useMemo(
    () =>
      api.createClient({
        transformer: superjson,
        links: [
          httpLink({
            url: `${getBaseUrl()}/api/trpc`,
            headers: async () => await getHeaders(),
          }),
          loggerLink({
            enabled: (opts) =>
              process.env.NODE_ENV === "development" ||
              (opts.direction === "down" && opts.result instanceof Error),
            colorMode: "ansi",
            onError: (err) => {
              console.error("Client-side tRPC error:", err);
            },
          }),
        ],
      }),
    [getHeaders]
  );

  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </api.Provider>
  );
};

import { useMemo, useCallback } from "react";
import Constants from "expo-constants";
import { useSupabaseClient } from "@supabase/auth-helpers-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink, loggerLink, httpLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import superjson from "superjson";

import type { AppRouter } from "@lumi/api";

/**
 * A set of typesafe hooks for consuming your API.
 */
export const api = createTRPCReact<AppRouter>();
export { type RouterInputs, type RouterOutputs } from "@lumi/api";


const getBaseUrl = () => {

  const debuggerHost = Constants.expoConfig?.hostUri;
  const localhost = debuggerHost?.split(":")[0];
  console.log("Localhost:", localhost); // Add logging

  if (!localhost) {
    // return "https://turbo.t3.gg";
    throw new Error(
      "Failed to get localhost. Please point to your production server.",
    );
  }
  return `http://${localhost}:3000`;
};

/**
 * A wrapper for your app that provides the TRPC context.
 * Use only in _app.tsx
 */
export const TRPCProvider = (props: { children: React.ReactNode }) => {
  const supabase = useSupabaseClient();

  const queryClient = useMemo(() => new QueryClient(), []);

  const getHeaders = useCallback(async () => {
    const headers = new Map<string, string>();
    headers.set("x-trpc-source", "expo-react");

    const { data } = await supabase.auth.getSession();
    const token = data.session?.access_token;
    console.log("called multiple times")
    if (token) headers.set("authorization", token);

    return Object.fromEntries(headers);
  }, [supabase]);

  const trpcClient = useMemo(
    () =>
      api.createClient({
        transformer: superjson,
        links: [
          httpLink({
            url: `${getBaseUrl()}/api/trpc`,
            headers: async () => await getHeaders(),
          }),
          loggerLink({
            enabled: (opts) =>
              process.env.NODE_ENV === "development" ||
              (opts.direction === "down" && opts.result instanceof Error),
            colorMode: "ansi",
            onError: (err) => {
              console.error("Client-side tRPC error:", err);
            },
          }),
        ],
      }),
    [getHeaders]
  );

  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </api.Provider>
  );
};