Dancamdev Posts - Answer Overflow

Dancamdev

•Created by Dancamdev on 1/26/2024 in #questions

Using Supabase Realtime with TRPC

Hi everyone, did any of you use Supabase Realtime with TRPC? The TRPC subscription api is understandably made for web sockets, while the Supabase realtime api isn't.

2 replies

TTCTheo's Typesafe Cult

•Created by Dancamdev on 1/24/2024 in #questions

Exposing Supabase Session to TRPC Server

Hi Folks, I'm trying to get my head around trpc, it's working great with drizzle and supabase postgres db. When it comes to auth, I was trying to have trpc context expose both, the supabase client and the session. I'm doing this by editing the t3 trpc createTRPCContext function as follows:

// trpc.ts

interface CustomCreateNextContextOptions extends CreateNextContextOptions {
  headers: Headers;
}

export const createTRPCContext = async (
  opts: CustomCreateNextContextOptions
) => {
  const { req, res } = opts;
  const supabase = createServerSupabaseClient({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return {
    db,
    supabase,
    session,
    ...opts,
  };
};

// trpc.ts

interface CustomCreateNextContextOptions extends CreateNextContextOptions {
  headers: Headers;
}

export const createTRPCContext = async (
  opts: CustomCreateNextContextOptions
) => {
  const { req, res } = opts;
  const supabase = createServerSupabaseClient({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return {
    db,
    supabase,
    session,
    ...opts,
  };
};

Notice that createServerSupabaseClient needs a Request and Response passed in, this is why I've modified the opts parameter to extend CreateNextContextOptions, instead of it just being {headers: Header}. Now I need to find a way to pass in the Request and Response objects when this function gets called in server.ts

// server.ts

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

// server.ts

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

but I'm not really sure how to do it, nor if this is the right approach at injecting supabase and the session in trpc.

4 replies

Gaming

Programming