Burhan
Burhan
TtRPC
Created by Burhan on 3/3/2024 in #❓-help
Public and Private procedures Not working with Clerk and Prisma
Followed this documentation
8 replies
TtRPC
Created by Burhan on 3/3/2024 in #❓-help
Public and Private procedures Not working with Clerk and Prisma
8 replies
TtRPC
Created by Burhan on 3/3/2024 in #❓-help
Public and Private procedures Not working with Clerk and Prisma
/middleware.ts
import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
// Routes that can be accessed while signed out
publicRoutes: ['/anyone-can-visit-this-route', '/api/trpc/'],
// Routes that can always be accessed, and have
// no authentication information
ignoredRoutes: ['/no-auth-in-this-route'],
});

export const config = {
// Protects all routes, including api/trpc.
// See https://clerk.com/docs/references/nextjs/auth-middleware
// for more information about configuring your Middleware
// matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
// Routes that can be accessed while signed out
publicRoutes: ['/anyone-can-visit-this-route', '/api/trpc/'],
// Routes that can always be accessed, and have
// no authentication information
ignoredRoutes: ['/no-auth-in-this-route'],
});

export const config = {
// Protects all routes, including api/trpc.
// See https://clerk.com/docs/references/nextjs/auth-middleware
// for more information about configuring your Middleware
// matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
8 replies
TtRPC
Created by Burhan on 3/3/2024 in #❓-help
Public and Private procedures Not working with Clerk and Prisma
/server/api/trpc.ts
import { TRPCError, type inferAsyncReturnType, initTRPC } from "@trpc/server";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { getAuth, type SignedInAuthObject, type SignedOutAuthObject } from '@clerk/nextjs/server';
import superjson from "superjson";
import { ZodError } from "zod";

import { prisma } from "~/server/prisma";

type CreateContextOptions = Record<string, never>;


interface AuthContext {
auth: SignedInAuthObject | SignedOutAuthObject;
}

export const createContextInner = async ({ auth }: AuthContext ) => {
return {
auth,
}
}


// const createInnerTRPCContext = (_opts: CreateContextOptions) => {
// return {
// prisma,
// };
// };

// export const createTRPCContext = (opts: CreateNextContextOptions) => {
// return {
// ...createInnerTRPCContext({}),
// req: opts.req,
// };
// };

export const createContext = async (opts: CreateNextContextOptions) => {
return await createContextInner({ auth: getAuth(opts.req) })
}


const t = initTRPC.context<Context>().create({
transformer: superjson,
errorFormatter({ shape }) {
return shape
}
})

export const createTRPCRouter = t.router;
export type Context = inferAsyncReturnType<typeof createContext>;

export const publicProcedure = t.procedure;


const isAuthed = t.middleware(({ next, ctx }) => {
if (!ctx.auth.userId) {
throw new TRPCError({ code: 'UNAUTHORIZED' })
}
return next({
ctx: {
auth: ctx.auth,
},
})
})

// export this procedure to be used anywhere in your application
export const protectedProcedure = t.procedure.use(isAuthed)

export const mergeRouters = t.mergeRouters;
import { TRPCError, type inferAsyncReturnType, initTRPC } from "@trpc/server";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { getAuth, type SignedInAuthObject, type SignedOutAuthObject } from '@clerk/nextjs/server';
import superjson from "superjson";
import { ZodError } from "zod";

import { prisma } from "~/server/prisma";

type CreateContextOptions = Record<string, never>;


interface AuthContext {
auth: SignedInAuthObject | SignedOutAuthObject;
}

export const createContextInner = async ({ auth }: AuthContext ) => {
return {
auth,
}
}


// const createInnerTRPCContext = (_opts: CreateContextOptions) => {
// return {
// prisma,
// };
// };

// export const createTRPCContext = (opts: CreateNextContextOptions) => {
// return {
// ...createInnerTRPCContext({}),
// req: opts.req,
// };
// };

export const createContext = async (opts: CreateNextContextOptions) => {
return await createContextInner({ auth: getAuth(opts.req) })
}


const t = initTRPC.context<Context>().create({
transformer: superjson,
errorFormatter({ shape }) {
return shape
}
})

export const createTRPCRouter = t.router;
export type Context = inferAsyncReturnType<typeof createContext>;

export const publicProcedure = t.procedure;


const isAuthed = t.middleware(({ next, ctx }) => {
if (!ctx.auth.userId) {
throw new TRPCError({ code: 'UNAUTHORIZED' })
}
return next({
ctx: {
auth: ctx.auth,
},
})
})

// export this procedure to be used anywhere in your application
export const protectedProcedure = t.procedure.use(isAuthed)

export const mergeRouters = t.mergeRouters;
8 replies
TtRPC
Created by Burhan on 3/3/2024 in #❓-help
Public and Private procedures Not working with Clerk and Prisma
No description
8 replies
TtRPC
Created by Burhan on 12/30/2023 in #❓-help
How to access isLoading if a Query is inside a component
But I am getting isLoading is undefined
8 replies
TtRPC
Created by Burhan on 12/30/2023 in #❓-help
How to access isLoading if a Query is inside a component
{isLoading ? (
<Skeleton height='15px'/>
) : (
<p className=" text-md font-semibold tracking-tight ">
{option.page_name} (Layout:{' '}
<LayoutName layoutId={option.layout_id} />)
</p>
)}
{isLoading ? (
<Skeleton height='15px'/>
) : (
<p className=" text-md font-semibold tracking-tight ">
{option.page_name} (Layout:{' '}
<LayoutName layoutId={option.layout_id} />)
</p>
)}
8 replies
TtRPC
Created by Burhan on 12/30/2023 in #❓-help
How to access isLoading if a Query is inside a component
This is where I want to use it
8 replies
TtRPC
Created by Burhan on 12/30/2023 in #❓-help
How to access isLoading if a Query is inside a component
const LayoutName = ({ layoutId }) => {
const { data: layoutApiData, isLoading } = trpc.layout.get.useQuery(
{ id: layoutId },
{
refetchOnWindowFocus: false,
enabled: layoutId ? true : false,
},
);

return <>{layoutApiData?.name}</>;
};
const LayoutName = ({ layoutId }) => {
const { data: layoutApiData, isLoading } = trpc.layout.get.useQuery(
{ id: layoutId },
{
refetchOnWindowFocus: false,
enabled: layoutId ? true : false,
},
);

return <>{layoutApiData?.name}</>;
};
8 replies