RobCipolla
RobCipolla
PostsComments
TTCTheo's Typesafe Cult
Created by RajatDas on 4/22/2024 in #questions
Use AWS S3 to store files
Exactly this!
8 replies
TTCTheo's Typesafe Cult
Created by RajatDas on 4/22/2024 in #questions
Use AWS S3 to store files
It's not "complicated" per say. But in the context of this question Uploadthing is supposed to be a quick solution.
8 replies
TTCTheo's Typesafe Cult
Created by RajatDas on 4/22/2024 in #questions
Use AWS S3 to store files
I mean. Your files are on S3. But also this kind of defeats the point of using something like uploadthing, which takes away the hassle of having to deal with the complexities and annoyances of AWS. If that is something you want to do, you could look into the source code for uploadtbing and how it works and how you can run your own solution?
8 replies
TTCTheo's Typesafe Cult
Created by RobCipolla on 4/9/2024 in #questions
Clerk and tRPC "protectedProcedures" on the server.
Figured it out. @Matvey was right. I can add Clerk's auth object to the server side context in /src/trpc/server.ts like so: 
import "server-only";

import { headers } from "next/headers";
import { cache } from "react";

import { createCaller } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { auth } from "@clerk/nextjs";

/**
 * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
 * handling a tRPC call from a React Server Component.
 */
const createContext = cache(() => {
  const heads = new Headers(headers());
  const authObject = auth();
  return createTRPCContext({
    headers: heads,
    auth: authObject,
  });
});

export const api = createCaller(createContext);
import "server-only";

import { headers } from "next/headers";
import { cache } from "react";

import { createCaller } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { auth } from "@clerk/nextjs";

/**
 * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
 * handling a tRPC call from a React Server Component.
 */
const createContext = cache(() => {
  const heads = new Headers(headers());
  const authObject = auth();
  return createTRPCContext({
    headers: heads,
    auth: authObject,
  });
});

export const api = createCaller(createContext);
7 replies
TTCTheo's Typesafe Cult
Created by RobCipolla on 4/9/2024 in #questions
Clerk and tRPC "protectedProcedures" on the server.
I suppose the question is... how do I get Clerk's auth object in the context when following this example from tRPC? https://trpc.io/docs/server/server-side-calls#context-with-middleware-example
7 replies
TTCTheo's Typesafe Cult
Created by RobCipolla on 4/9/2024 in #questions
Clerk and tRPC "protectedProcedures" on the server.
Not quite... The method Theo uses in the video for adding the Clerk auth object to the ctx works a charm. However, I experimented with the Create T3 App App router and using tRPC on ther server. You know using import { api } from "@/trpc/server"; instead of import { api } from "@/trpc/react";. The problem is (if my understanding is correct) because Next server components don't have access to the Request object, I can't figure how to pass the auth object to the ctx when using tRPC on the server... (really not sure if this is making sense). I am looking to make sure these requests are authed: 
const posts = await api.post.getAll()
const posts = await api.post.getAll()
These ones work fine: 
 
const posts = api.post.getAll.useQuery();
 
const posts = api.post.getAll.useQuery();
I THINK it is because the server side api call for tRPC is created in server/trpc/api.ts where the context passed to it doesn't get access to the request object - which the clerk getAuth() method requires in order to create it's auth object. 
/**
 * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
 * handling a tRPC call from a React Server Component.
 */
const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

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

export const api = createCaller(createContext);
/**
 * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
 * handling a tRPC call from a React Server Component.
 */
const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

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

export const api = createCaller(createContext);
where as I can pass the auth object to the clerk context in for client side components similar to the way Theo did in the tutorial.
7 replies