Poonda
Poonda
PostsComments
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
(I personally don't understand fully the why, but that's the task I got, I've tried to argue diffrently, but I'm not the Team Lead :D)
10 replies
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
security, to not expose my TRPC server to the client side
10 replies
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
for now i found doing this is working, but i really don't now when it will bite me back: 
const handler = async (req: Request) => {
  const body = await req.text();
  const path = req.url.split("/api/trpc/")[1]; // taking the second half
  const url = `${process.env.TRPC_SERVER}/trpc/${path}`

  const headers = req.headers;
  console.log("ROUTE", { body, url, headers });

  const response = await fetch(url, {
    method: req.method,
    headers: req.headers,
    // GET and HEAD can't have a body
    body: req.method === "GET" ||
      req.method === "HEAD" ?
      null : body,
  });
  return new Response(response.body, {
    status: response.status,
    headers: response.headers,
  })
};

export { handler as GET, handler as POST };
const handler = async (req: Request) => {
  const body = await req.text();
  const path = req.url.split("/api/trpc/")[1]; // taking the second half
  const url = `${process.env.TRPC_SERVER}/trpc/${path}`

  const headers = req.headers;
  console.log("ROUTE", { body, url, headers });

  const response = await fetch(url, {
    method: req.method,
    headers: req.headers,
    // GET and HEAD can't have a body
    body: req.method === "GET" ||
      req.method === "HEAD" ?
      null : body,
  });
  return new Response(response.body, {
    status: response.status,
    headers: response.headers,
  })
};

export { handler as GET, handler as POST };
10 replies
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
No description
10 replies
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
No description
10 replies
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
About the type I don't think i would have problem, because when creating the trpcClient in NextJs, i use the AppRouter type from my internal package where i declare the appRouter and the procedures: 
import { createTRPCReact } from "@trpc/react-query";
// ...Imports...
import { type AppRouter } from "@acme/trpc"; // Internal Package of Monorepo

export const trpcClient = createTRPCReact<AppRouter>();

export const queryClient = new QueryClient();

export default function TRPCProvider({ children }: { children: React.ReactNode }) {
  const [client] = useState(() =>
    trpcClient.createClient({
      links: [
        httpBatchLink({
          url: `/api/trpc`,
        }),
      ],
    }),
  );
  return (
    <trpcClient.Provider client={client} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </trpcClient.Provider>
  );
}
import { createTRPCReact } from "@trpc/react-query";
// ...Imports...
import { type AppRouter } from "@acme/trpc"; // Internal Package of Monorepo

export const trpcClient = createTRPCReact<AppRouter>();

export const queryClient = new QueryClient();

export default function TRPCProvider({ children }: { children: React.ReactNode }) {
  const [client] = useState(() =>
    trpcClient.createClient({
      links: [
        httpBatchLink({
          url: `/api/trpc`,
        }),
      ],
    }),
  );
  return (
    <trpcClient.Provider client={client} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </trpcClient.Provider>
  );
}
10 replies
TtRPC
Created by Poonda on 8/11/2024 in #❓-help
Forward NextJs Request to TRPC Server
About the context to why I want to split the server. First of all all of the code sit in a Turbo monorepo. we have a react-native app, and a nextjs web-app that both need to talk to the TRPC server for the common logic. as of today i have my TRPC server on NextJs and React Native is talking to next server with TRPC. The problem we have is that each time i need to update some TRPC procedure I need to deploy and release NextJs as well, which is not favorable for us.
10 replies