Spark Comments - Answer Overflow

getting close, but I am having to put "use client" in the layout.tsx file for some reason? not playing nice with app router. will come back to this later.

7 replies

TTCTheo's Typesafe Cult

•Created by _-/=elusive1sTh3Byte=-\_ on 1/3/2024 in #questions

Developing a UI without a design

I personally just use shadcn/ui and Tailwind UI in the early stages of a project. I just take 1 step at a time and pick whatever component looks the best for the thing I am trying to make. You can waste so much time over designing something you don't even need in a few days.

55 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

TypeError: queryClient.getMutationDefaults is not a function

TypeError: queryClient.getMutationDefaults is not a function

123 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

awesome, thanks! didn't realize we could just use the auth() function instead of getAuth() now. have you been able to useMutation? I keep getting an error, but it might just be my mistake.

123 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

right, I implemented those changes, but are you still setting auth in trpc.ts on the ctx?

123 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

anyone have a clerk example working with the newest create-t3-app? where do we set auth?

123 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

nothing Clerk specific, just that using createCaller forces you to set the runtime in page.tsx instead of the way I was splitting edge/lambda before

123 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

I haven’t seen a full implementation yet. I have used createCaller with some success in server.ts, but I am running into issues with useMutation on the client atm.

123 replies

TTCTheo's Typesafe Cult

•Created by TOSL on 11/14/2023 in #questions

Setup for seeding db using Drizzle

Good starting point

5 replies

TTCTheo's Typesafe Cult

•Created by TOSL on 11/14/2023 in #questions

Setup for seeding db using Drizzle

https://dev.to/anasrin/seeding-database-with-drizzle-orm-fga

5 replies

TTCTheo's Typesafe Cult

•Created by Pavstermeister on 11/5/2023 in #questions

Configuring Clerk on the latest release of t3 with tRPC

this seems to work for me as a temporary solution, but how would I continue to split edge and lambda, like in the OpenStatus repo? I previously had: server.ts

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    endingLink({
      headers: () => {
        return {
          cookie: cookies().toString(),
          "x-trpc-source": "rsc",
        };
      },
    }),
  ],
});

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    endingLink({
      headers: () => {
        return {
          cookie: cookies().toString(),
          "x-trpc-source": "rsc",
        };
      },
    }),
  ],
});

shared.ts

const lambdas = ["clerkRouter"];

export const endingLink = (opts?: {
  headers?: HTTPHeaders | (() => HTTPHeaders);
}) =>
  ((runtime) => {
    const sharedOpts = {
      headers: opts?.headers,
    } satisfies Partial<HTTPBatchLinkOptions>;

    const edgeLink = unstable_httpBatchStreamLink({
      ...sharedOpts,
      url: `${getBaseUrl()}/api/trpc/edge`,
    })(runtime);
    const lambdaLink = unstable_httpBatchStreamLink({
      ...sharedOpts,
      url: `${getBaseUrl()}/api/trpc/lambda`,
    })(runtime);

    return (ctx) => {
      const path = ctx.op.path.split(".") as [string, ...string[]];
      const endpoint = lambdas.includes(path[0]) ? "lambda" : "edge";

      const newCtx = {
        ...ctx,
        op: { ...ctx.op, path: path.join(".") },
      };
      return endpoint === "edge" ? edgeLink(newCtx) : lambdaLink(newCtx);
    };
  }) satisfies TRPCLink<AppRouter>;

const lambdas = ["clerkRouter"];

export const endingLink = (opts?: {
  headers?: HTTPHeaders | (() => HTTPHeaders);
}) =>
  ((runtime) => {
    const sharedOpts = {
      headers: opts?.headers,
    } satisfies Partial<HTTPBatchLinkOptions>;

    const edgeLink = unstable_httpBatchStreamLink({
      ...sharedOpts,
      url: `${getBaseUrl()}/api/trpc/edge`,
    })(runtime);
    const lambdaLink = unstable_httpBatchStreamLink({
      ...sharedOpts,
      url: `${getBaseUrl()}/api/trpc/lambda`,
    })(runtime);

    return (ctx) => {
      const path = ctx.op.path.split(".") as [string, ...string[]];
      const endpoint = lambdas.includes(path[0]) ? "lambda" : "edge";

      const newCtx = {
        ...ctx,
        op: { ...ctx.op, path: path.join(".") },
      };
      return endpoint === "edge" ? edgeLink(newCtx) : lambdaLink(newCtx);
    };
  }) satisfies TRPCLink<AppRouter>;

123 replies

Gaming

Programming