Poonda Comments

Thanks, what t3 turbo has is pretty much the state of our current app, in the example they are only sharing the tRPC router. each application build the logic around the procedures. In my case in need to share frontend logic that use the trpc calls. Let take a simple example (my use case is more complex, that why i want to share the logic)

  const utils = api.useUtils();
  const createPost = api.post.create.useMutation({
    onSuccess: async () => {
      form.reset();
      await utils.post.invalidate();
    },
    onError: (err) => {
      toast.error(
        err.data?.code === "UNAUTHORIZED"
          ? "You must be logged in to post"
          : "Failed to create post",
      );
    },
  });

  const utils = api.useUtils();
  const createPost = api.post.create.useMutation({
    onSuccess: async () => {
      form.reset();
      await utils.post.invalidate();
    },
    onError: (err) => {
      toast.error(
        err.data?.code === "UNAUTHORIZED"
          ? "You must be logged in to post"
          : "Failed to create post",
      );
    },
  });

Let say in wrap this logic in a hook an put it in a shared package for the two app to use. I need a way to inject the api trpc client for this hook.

6 replies

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

10 replies

TtRPC

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

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