Sigo•2mo ago

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

I keep getting api request to backend continously even without making api request. my api client

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>
  );
};

7 Replies

BeastFox•2mo ago

@Sigo sorry what request is being made here? is it the retrieval of supabase credentials occurring multiple times?

Sigo•2mo ago

It trys to make request to the query which i already commented out and it keeps retrying. i think it has to do with caching of request i guess I turned off retries but still getting same issues test this is how am making the query

  const user = useAppUser();

  const [activitity, setActivity] = useState();
  const [skip, setSkip] = useState(0);
  const limit = 20;
  const today = new Date();

  const { 
    data: challenges, 
    isLoading, 
    refetch,
    isRefetching
  } = api.challenges.list.useQuery(
    user ? {
      limit: 50,
      skip,
      id: user.id,
      startDate: today,
      ...(activitity ? { activities: [activitity] } : {})
    } : null, // Only make the request if user is available
    { enabled: !!user, trpc: { abortOnUnmount: true, }} // Ensure the query is enabled only when user is available
  );

  const user = useAppUser();

  const [activitity, setActivity] = useState();
  const [skip, setSkip] = useState(0);
  const limit = 20;
  const today = new Date();

  const { 
    data: challenges, 
    isLoading, 
    refetch,
    isRefetching
  } = api.challenges.list.useQuery(
    user ? {
      limit: 50,
      skip,
      id: user.id,
      startDate: today,
      ...(activitity ? { activities: [activitity] } : {})
    } : null, // Only make the request if user is available
    { enabled: !!user, trpc: { abortOnUnmount: true, }} // Ensure the query is enabled only when user is available
  );

@BeastFox

Sigo•2mo ago

the network tab

BeastFox•2mo ago

@Sigo what happens if you hard code the values in? Something like the following:

  const { 
    data: challenges, 
    isLoading, 
    refetch,
    isRefetching
  } = api.challenges.list.useQuery(
     {
      limit: 50,
      skip: 0,
      id: 'your-user-id-here',
      startDate: new Date(),
      activities: [],
    },
    { enabled: true, trpc: { abortOnUnmount: true, }} 
  );

  const { 
    data: challenges, 
    isLoading, 
    refetch,
    isRefetching
  } = api.challenges.list.useQuery(
     {
      limit: 50,
      skip: 0,
      id: 'your-user-id-here',
      startDate: new Date(),
      activities: [],
    },
    { enabled: true, trpc: { abortOnUnmount: true, }} 
  );

Just to try and eliminate any external state variables first.

Sigo•2mo ago

same thing also happening

BeastFox•2mo ago

My only other idea is that it's something to do with your TRPCProvider, if getHeaders is being called multiple times that would suggest either a higher level context is recalculating it I think, or that something is happening in your useSupabaseClient. I can't be too sure, so someone else would have to chime in if they have other advice. But my recommendation in situations like this would be to try and strip back your code as much as possible. So you have the most basic implementation created where you successfully have it so that only one request occurs. https://trpc.io/docs/client/react/setup Basically following the above here ^ (But hard coding the api.challenges.list.useQuery input etc..) Then, begin slowly adding things back until you can see where multiple requests occur.

Set up the React Query Integration | tRPC

How to use and setup tRPC in React

Sigo•2mo ago

i will try that thanks