Topics

Theo's Typesafe Cult•14mo ago

How can I fetch data in my component

Here is the link to stackoverflow.com displaying how I implemented it https://stackoverflow.com/q/76112994/19684000

Stack Overflow

Rendering fetched data from supabase in Nextjs13 App Directory

I successfully fetched data from supabase but I am unable to render them in my component , I tried implemented a component to hold the fetched data but i was unable to as it arose to other errors t...

79 Replies

froxx•14mo ago

Im not familiar with supabase, but the general way of calling your endpoint, wait for a response, and set the result to a state variable in your component looks right. You should probably add am empty dependency array to your useEffect though. Apart from that a bit more information on what's going wrong in your example would help solving the cause. Also you're not rendering the "profiles" state in your component yet

Revaycolizer•14mo ago

I didn't include rendering because no matter how I tried to render I got errors

Pitus•14mo ago

Hey, are you using t3 stack? if so it's better to make it with prisma seems like what you're trying to do is to fetch users data. I suggest you to use following provider and use User hook:

import React, { createContext, useContext, useEffect, useState } from "react";
import type { Session, User } from "@supabase/supabase-js";
import { supabase } from "~/utils/supabase-client";

export const AuthContext = createContext<{
  user: User | null;
  session: Session | null;
  isLoading: boolean;
}>({
  user: null,
  session: null,
  isLoading: true,
});

export const AuthContextProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [userSession, setUserSession] = useState<Session | null>(null);
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    void supabase.auth.getSession().then(({ data: { session } }) => {
      setUserSession(session);
      setUser(session?.user ?? null);
      setIsLoading(false);
    });

    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUserSession(session);
        setUser(session?.user ?? null);
        setIsLoading(false);
      }
    );

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, []);

  const value = {
    session: userSession,
    user,
    isLoading,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export const useUser = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useUser must be used within a AuthContextProvider.");
  }
  return context;
};

import React, { createContext, useContext, useEffect, useState } from "react";
import type { Session, User } from "@supabase/supabase-js";
import { supabase } from "~/utils/supabase-client";

export const AuthContext = createContext<{
  user: User | null;
  session: Session | null;
  isLoading: boolean;
}>({
  user: null,
  session: null,
  isLoading: true,
});

export const AuthContextProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [userSession, setUserSession] = useState<Session | null>(null);
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    void supabase.auth.getSession().then(({ data: { session } }) => {
      setUserSession(session);
      setUser(session?.user ?? null);
      setIsLoading(false);
    });

    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUserSession(session);
        setUser(session?.user ?? null);
        setIsLoading(false);
      }
    );

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, []);

  const value = {
    session: userSession,
    user,
    isLoading,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export const useUser = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useUser must be used within a AuthContextProvider.");
  }
  return context;
};

then you can just use it as

consr {user} = useUser()

consr {user} = useUser()

but that's from supabse auth.user if you want to fetch data of users profile you would have to set up supabse user management (check our sql editor and default templates) and then fetch from public.profile (or profiles I don't remember)

Pitus•14mo ago

check out how I'm using it, here's an t3 + supabse app I built like a week ago: https://github.com/F-PTS/FriendlyMacros maybe it would help you

GitHub

GitHub - F-PTS/FriendlyMacros

Contribute to F-PTS/FriendlyMacros development by creating an account on GitHub.

Pitus•14mo ago

there's a bit of antipatterns in code you've put on stack overflow (e.g. useEffect without dependency array, using any types, etc.) I think FriendlyMacros repo would help you understand what good practices in react, next, prisma, trpc and supabase are

Revaycolizer•14mo ago

i am using supabase with nextjs without prisma thanks bruh but this one i used nextjs 13.3.1 App Directory and Supabase i included codes where i am performing rendering i successfully fetch them but I am unable to render them

Pitus•14mo ago

yeah same, i just used trpc and prisma as well but shouldnt be any trouble since its just a context provider how come?

Revaycolizer•14mo ago

as i console log the data of a specific user i saw them but rendering it throws an error i added Profile.tsx component in stackocerflow you used new App Directory?

Pitus•14mo ago

yes what was the error?

Revaycolizer•14mo ago

let me screenshot it now

Pitus•14mo ago

also, why are you using React.FC<ProfileProps> ? the default way of making functional component would be just fine I think

Revaycolizer•14mo ago

i shifted from prisma as i was only able to migrate model into the database but i was unable to perform user registration that's why i decided to shift to pure supabase as i always do when i am using vue 3 which one

Pitus•14mo ago

Profile.tsx

import React from 'react'
interface ProfileProps{
   name?:string;
   email?:string;
   phone?: string;
}

const profile: ProfileProps={}

const Profile:React.FC<ProfileProps> = () => {
 return (
   <div className='justify-center items-center flex flex-col bg-green-100'>
       <p>Name:{profile.name}</p>
       <p>Email:{profile.email}</p>
       <p>Phone:{profile.phone}</p>
   </div>
 )
}

export default Profile

import React from 'react'
interface ProfileProps{
   name?:string;
   email?:string;
   phone?: string;
}

const profile: ProfileProps={}

const Profile:React.FC<ProfileProps> = () => {
 return (
   <div className='justify-center items-center flex flex-col bg-green-100'>
       <p>Name:{profile.name}</p>
       <p>Email:{profile.email}</p>
       <p>Phone:{profile.phone}</p>
   </div>
 )
}

export default Profile

What would the point of React.FC and not

const Profile = ({profile}: {profile: ProfileProps}) => {
   return (
   <div className='justify-center items-center flex flex-col bg-green-100'>
       <p>Name:{profile.name}</p>
       <p>Email:{profile.email}</p>
       <p>Phone:{profile.phone}</p>
   </div>
 )
}

const Profile = ({profile}: {profile: ProfileProps}) => {
   return (
   <div className='justify-center items-center flex flex-col bg-green-100'>
       <p>Name:{profile.name}</p>
       <p>Email:{profile.email}</p>
       <p>Phone:{profile.phone}</p>
   </div>
 )
}

Revaycolizer•14mo ago

this is the error i am facing

Pitus•14mo ago

yeah great but let me see the error message hover over it oh yeah i think I know what are doing

Revaycolizer•14mo ago

this one throws some error

Pitus•14mo ago

you specified in Profile.tsx that profile has to be type of ProfileProps. Meanwhile you are passing any into it let me see an error message

Revaycolizer•14mo ago

this one

Revaycolizer•14mo ago

should i pass a string?

Pitus•14mo ago

well no wonder it cannot find ProfileProps since you commented it out. Remove comments from the interface and delete 8th line

Revaycolizer•14mo ago

done then should i try to see if the data can be displayed?

Pitus•14mo ago

do you have a way of getting a type of your profile in your page.tsx?

Revaycolizer•14mo ago

thanks bruh they are retrieved successfully

Pitus•14mo ago

because if you do, you should change :any type to the type of your response but do not import the type from @prisma/client. You shouldn't mix backend and front end types (not a good practice)

Revaycolizer•14mo ago

i was able bruh thanks to you now i will be thinking only about implementing middleware i am using pure nextjs and supabase bruh

Pitus•14mo ago

yeah sure, also keep in mind that you should almost never (unless in app directory) use export default. Use export instead oh right i brain farted lol supabase could generate your types tho

Revaycolizer•14mo ago

i didn't generate types i just gave it a thought as supabase-js supports types what if i could utilize it without generating types using supabase cli

Pitus•14mo ago

supabase gen types typescript --project-id \"YOUR_PROJECT_ID"\" --schema public > src/types/supabase.types.ts

supabase gen types typescript --project-id \"YOUR_PROJECT_ID"\" --schema public > src/types/supabase.types.ts

uhh I'm not sure which way would be the best to be honest since I don't know much about supabse-js

Revaycolizer•14mo ago

oh it's okay bruh but i am really thankful with your help as i was able to get through this nightmare

Pitus•14mo ago

sure, no problem

Revaycolizer•14mo ago

any idea as how i can implement middleware bruh

Pitus•14mo ago

the auth middleware?

Revaycolizer•14mo ago

of course as i want to protect routes

Pitus•14mo ago

You could do a HigherOrderComponent and use my AuthContext

Revaycolizer•14mo ago

then how can i attach it to my app directory

Pitus•14mo ago

and then just do

export default withAuthPContext(Page)

export default withAuthPContext(Page)

on every page that user would have to be signed in to access the page then inside the HOC you can use the useUser hook and redirect if there's no user or session (meaning thay user is logged off / user does not exist) a little tip: in app folder create (grantedAccess) folder, or (app), anything. doesnt matter but keep the naming accurate and in that folder with () around the name add layout.tsx file. and there you can use withAuthContxt HigherOrderComponent

Revaycolizer•14mo ago

let me show you my app folder structure

Revaycolizer•14mo ago

inside (main) i created layout.tsx

Pitus•14mo ago

yeah and now just move every page you'd want to be accessed only by signed in users you dont have to specify the name of (main) in routes, next automatically ignores it

Revaycolizer•14mo ago

my layout.tsx

Pitus•14mo ago

app - (main) -- page.tsx is NOT /(main)/ it is simply / (the default route)

export default withAuthContext(RootLayout)

export default withAuthContext(RootLayout)

Revaycolizer•14mo ago

is how i moved the files correctly?

Pitus•14mo ago

Make sure you didn't require to be signed in, in order to sign up or sign in other than that it should be fine

Revaycolizer•14mo ago

should i use this one? the components to sign in the user are not in (main) folder

Pitus•14mo ago

yes good

Revaycolizer•14mo ago

what about the component i included in the layout.tsx

Pitus•14mo ago

yeah seems good, but make sure it renders as a column and not as a row so navbar is on top and not on the side

Revaycolizer•14mo ago

yes bruh it is on the top but wrapping it requires adding "use client" is it a good practice a middleware having "use client"?

Pitus•14mo ago

did you create it in app folder?

Revaycolizer•14mo ago

in (main) folder here menu.tsx

Pitus•14mo ago

move it to src/utils

Revaycolizer•14mo ago

menu.tsx?

Pitus•14mo ago

it's an server utility, not client the higher order component

import { redirect, usePathname } from "next/navigation";
import { useUser } from "~/providers/AuthContextProvider/AuthContextProvider";
import { api } from "~/utils/api";
import { Spinner } from "~/components/ui/spinner";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const WithPrivateRoute = (Component: React.FunctionComponent<any>) => {
  const NewComponent = () => {
    const { user, isLoading } = useUser();

    if (isLoading) return <Spinner />;
    if (!user) redirect("/unauthorized");

    return <Component />;
  };

  return NewComponent;
};

import { redirect, usePathname } from "next/navigation";
import { useUser } from "~/providers/AuthContextProvider/AuthContextProvider";
import { api } from "~/utils/api";
import { Spinner } from "~/components/ui/spinner";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const WithPrivateRoute = (Component: React.FunctionComponent<any>) => {
  const NewComponent = () => {
    const { user, isLoading } = useUser();

    if (isLoading) return <Spinner />;
    if (!user) redirect("/unauthorized");

    return <Component />;
  };

  return NewComponent;
};

Revaycolizer•14mo ago

middleware???

Pitus•14mo ago

yes, the middleware

Revaycolizer•14mo ago

what about the layout i just created? as i get confused bruh

Pitus•14mo ago

at the end of layout.tsx in (main) add:

export default WithPrivateRoute(layout);

export default WithPrivateRoute(layout);

Revaycolizer•14mo ago

is this the middleware or layout?

Pitus•14mo ago

this is the middleware

Revaycolizer•14mo ago

oh my bad i replaced layout.tsx with it

Pitus•14mo ago

lol

Revaycolizer•14mo ago

getting AuthContext.Provider error solved as i first saved it as middleware.ts instead of middleware.tsx

Pitus•14mo ago

good

Revaycolizer•14mo ago

now getting this error in layout.tsx

Pitus•14mo ago

yeah so if you actually read it you could solve it

Revaycolizer•14mo ago

i was wondering as i should remove children

Pitus•14mo ago

think

Revaycolizer•14mo ago

or am i making a big mistake?

Pitus•14mo ago

yes, you are

Revaycolizer•14mo ago

then should i remove RootLayout?

Revaycolizer•14mo ago

here

Pitus•14mo ago

think what are you trying to achieve

Revaycolizer•14mo ago

protecting pages rendered in this route

Pitus•14mo ago

yeah and how would you do it

Revaycolizer•14mo ago

by using middleware to restrict unauthenticated user

Pitus•14mo ago

and how do you use middelware? look at the code of WithPrivateRoute

Revaycolizer•14mo ago

let me check it again this PrivateRoute where do i include it

Revaycolizer•14mo ago

am i right?

Revaycolizer•14mo ago

tried but getting only a spinner even if user is authenticated

Theo's Typesafe Cult Join

21KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Proper REST API NestingI feel like I am doing too much nesting. Do these routes look semantically correct overall? thanks! Help Me make a custom login PageI'm using Credential Provider for nextAuth I want to customise my login page Unhandled Runtime ErrorTop of the code ```ts const doTraduzioneLatino = (text: string) => { if (textAreaLatinoRef.cur CSS Modules (SCSS)Hi there ✌🏻 I'm new in t3 stack and how to config css modules(SCSS) to it?? thanks in advance CVA Boolean type enablesI have a table cell component that I am working on, and im trying to do a couple of styles that can invalid environment variablesI logged all variables all of them are undefined, what might have gone wrong? ```js { DATABASE_URL Problems with next-auth middleware```ts import { withAuth } from 'next-auth/middleware'; const publicFileRegex = /\.(.*)$/; const ano Create T3 app to PWAHi, has anyone managed to refactor create t3-app to PWA? I don't know how to do it. could someone sh Need advice on SVGs for creating custom shapes for react/nextI'll be creating some custom shapes (e.g. custom maps, math/geometry illustrations) for a react app Stupid Prettier parsing, it adds two spaces triggering my ADHD error systemKind of a stupid question but whenever I use an union in TS, Prettier lints it with two extra spaces