NextJS + Supabase question: createBrowserSupabaseClient vs useSupabaseClient NextJS hooks
Hello, I'm wondering if there's any issues if I decide to use createBrowserSupabaseClient everytime I need to fetch something from a function outside of a React component?
As an example, I have my own custom useUser hook that basically fetches the user using Supabase and caches it using React Query. It looks like this:
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { useQuery } from "@tanstack/react-query";
import type { Database } from "../../../types/supabase-types";
const getCurrentUser = async () => {
const supabase = createBrowserSupabaseClient<Database>();
const {
data: { user },
error,
} = await supabase.auth.getUser();
if (error || !user) {
throw error;
}
return user;
};
const useUser = () =>
useQuery({
queryKey: ["activeUser"],
queryFn: getCurrentUser,
retry: false,
staleTime: 1000 * 60 * 20, // 20
refetchOnWindowFocus: false,
refetchOnMount: false,
});
export default useUser;
I noticed that if I want to use the useSupabaseClient() hook inside the getCurrentUser function (instead of createBrowserSupabaseClient), I can't do so because it can only be run inside a hook/component. I realize I could pass down the client through a parameter but that's not very clean.
Are there any issues with using createBrowserSupabaseClient instead? I like my current implementation and haven't ran into any issues yet.
As an example, I have my own custom useUser hook that basically fetches the user using Supabase and caches it using React Query. It looks like this:
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { useQuery } from "@tanstack/react-query";
import type { Database } from "../../../types/supabase-types";
const getCurrentUser = async () => {
const supabase = createBrowserSupabaseClient<Database>();
const {
data: { user },
error,
} = await supabase.auth.getUser();
if (error || !user) {
throw error;
}
return user;
};
const useUser = () =>
useQuery({
queryKey: ["activeUser"],
queryFn: getCurrentUser,
retry: false,
staleTime: 1000 * 60 * 20, // 20
refetchOnWindowFocus: false,
refetchOnMount: false,
});
export default useUser;
I noticed that if I want to use the useSupabaseClient() hook inside the getCurrentUser function (instead of createBrowserSupabaseClient), I can't do so because it can only be run inside a hook/component. I realize I could pass down the client through a parameter but that's not very clean.
Are there any issues with using createBrowserSupabaseClient instead? I like my current implementation and haven't ran into any issues yet.
