devve2kcc Posts - Answer Overflow

devve2kcc

Explore posts from servers

TTCTheo's Typesafe Cult HHono BABetter Auth

•Created by devve2kcc on 2/18/2025 in #questions

Using Next Js with GRPC Backend

I'm interning at a friend's startup building a SaaS for textile companies. The backend is in Go with gRPC, and I’m handling the frontend. While Angular is the proposed framework, I'm more comfortable with Next.js, which offers easy server-side rendering and data prefetching—crucial for our data-heavy tables and pagination. I’m exploring options like React Query or tRPC for managing data fetching, but I need to integrate them with gRPC without adding unnecessary complexity. What’s the best approach to efficiently prefetch data, handle pagination, and communicate with gRPC in this context? Anyone worked in a similiar codebase?

2 replies

TTCTheo's Typesafe Cult

•Created by devve2kcc on 2/16/2025 in #questions

Correct way to add clerk auth to trpc

Hi, after 3 days of learning t3stack, i encounter some problems trying to create an privateProcedure, that using getAuth from and passing the "req", does not work, showing something like headers not defined, so i tried to modify api route, to only pass req, and not headers but also not working, im using app router, and i search on internet, and all solutions is for pages router, TypeError: Cannot read properties of undefined (reading 'headers'); The error will be redacted in production builds example code

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
  });
};

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
  });
};

import * as trpc from '@trpc/server'
import * as trpcNext from '@trpc/server/adapters/next'
import { getAuth } from '@clerk/nextjs/server'

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

import * as trpc from '@trpc/server'
import * as trpcNext from '@trpc/server/adapters/next'
import { getAuth } from '@clerk/nextjs/server'

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

but i found one dev.to blog, that shows the same problem that me, and the way he found to fix it, is use currentUser from next js, and seems to work fine, but is this the correct way to do it? t3stack seems to be an amazing way to create apps, but i think we do not have alot of docs or guides to use it.

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const user = await currentUser();

  return {
    db,
    user,
    ...opts,
  };
};

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const user = await currentUser();

  return {
    db,
    user,
    ...opts,
  };
};

2 replies

TTCTheo's Typesafe Cult

•Created by devve2kcc on 1/27/2025 in #questions

Next js server actions

Hi, its my first time using server actions, i always use an api and make requests using react query, So I'm used to handling query invalidations, through react query, and now using actions, to simplify my code base, since it's a very simple project, would this be the best way to update data after removing files? by the way, does the code structure look correct?

2 replies

HHono

•Created by devve2kcc on 1/16/2025 in #help

Problem passing jwt token by rpc

hi guys, i have an endpoint localhost:5555/api/summary, that works fine testing on any app like postman, passing an Bearer token, but do not work when i use hono client passing the bearer token, always says that the token is not passed

const app = new Hono().get("/", async (c) => {
    const user = c.get("jwtPayload");
    
    if (!user) {
        return c.json({ error: "Unauthorized" }, 401);
    }

    return c.json({success: true})

const app = new Hono().get("/", async (c) => {
    const user = c.get("jwtPayload");
    
    if (!user) {
        return c.json({ error: "Unauthorized" }, 401);
    }

    return c.json({success: true})

export const useGetSummary = () => {
    const { user } = useUser()
    const query = useQuery({
        queryKey: ["summary"],
        queryFn: async () => {
            const token = user?.token
            console.log(token); // the token exists, because is primted on console.

            const response = await client.api.summary.$get({
                headers: {
                    Authorization: `Bearer ${token}` //im passing there the bearer token
                }
            });

            if (!response.ok) {
                throw new Error("Failed to fetch transactions!");
            }

            const { data } = await response.json();
            return {
                ...data,
                incomeAmount: convertAmountFromMiliunits(data.incomeAmount),
                expensesAmount: convertAmountFromMiliunits(data.expensesAmount),
                remainingAmount: convertAmountFromMiliunits(data.remainingAmount),
                categories: data.categories.map((category) => ({
                    ...category,
                    value: convertAmountFromMiliunits(category.value),
                })),
                days: data.days.map((day) => ({
                    ...day,
                    income: convertAmountFromMiliunits(day.income),
                    expenses: convertAmountFromMiliunits(day.expenses),
                })),
            };
        },
    });
    return query;
};

export const useGetSummary = () => {
    const { user } = useUser()
    const query = useQuery({
        queryKey: ["summary"],
        queryFn: async () => {
            const token = user?.token
            console.log(token); // the token exists, because is primted on console.

            const response = await client.api.summary.$get({
                headers: {
                    Authorization: `Bearer ${token}` //im passing there the bearer token
                }
            });

            if (!response.ok) {
                throw new Error("Failed to fetch transactions!");
            }

            const { data } = await response.json();
            return {
                ...data,
                incomeAmount: convertAmountFromMiliunits(data.incomeAmount),
                expensesAmount: convertAmountFromMiliunits(data.expensesAmount),
                remainingAmount: convertAmountFromMiliunits(data.remainingAmount),
                categories: data.categories.map((category) => ({
                    ...category,
                    value: convertAmountFromMiliunits(category.value),
                })),
                days: data.days.map((day) => ({
                    ...day,
                    income: convertAmountFromMiliunits(day.income),
                    expenses: convertAmountFromMiliunits(day.expenses),
                })),
            };
        },
    });
    return query;
};

6 replies

Gaming

Programming