trpc: inject server and client side api routers and config via respec…

…tive ioc container #7

src/app/[rc_id]/conversations/[conv_id]/page.tsx

@@ -2,10 +2,10 @@ import { env } from "~/env";
 import { redirect } from "next/navigation";
 
 import { DummySendMessage } from "~/app/_components/dummy-send-message";
-import { api } from "~/lib/infrastructure/server/trpc/server-api";
 import type AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
-import { GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import { GATEWAYS, TRPC } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import type { TServerComponentAPI } from "~/lib/infrastructure/server/trpc/server-api";
 
 export default async function Home({
   params,
@@ -23,14 +23,15 @@ export default async function Home({
 }
 
 async function ListMessages({ conv_id }: { conv_id: string }) {
+  const api: TServerComponentAPI = serverContainer.get(TRPC.REACT_SERVER_COMPONENTS_API);
   const conv_id_int = parseInt(conv_id);
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(
     GATEWAYS.AUTH_GATEWAY,
   );
   const session = await authGateway.getSession();
   if (!session?.user) return null;
 
-  const messages = await api.message.list({
+  const messages = await api.kernel.message.list({
     conversationId: conv_id_int,
     xAuthToken: env.KP_AUTH_TOKEN,
   });

src/app/[rc_id]/conversations/page.tsx

@@ -1,10 +1,10 @@
 import { env } from "~/env";
 import { redirect } from "next/navigation";
 import { ListConversationsPage } from "../../_components/list-conversations";
-import { api } from "~/lib/infrastructure/server/trpc/server-api";
 import type AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
-import { GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import { GATEWAYS, TRPC } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import type { TServerComponentAPI } from "~/lib/infrastructure/server/trpc/server-api";
 
 export default async function Home({ params }: { params: { rc_id: string } }) {
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(
@@ -18,14 +18,15 @@ export default async function Home({ params }: { params: { rc_id: string } }) {
 }
 
 async function ListConversations({ rc_id }: { rc_id: string }) {
+  const api: TServerComponentAPI = serverContainer.get(TRPC.REACT_SERVER_COMPONENTS_API);
   const rc_id_int = parseInt(rc_id);
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(
     GATEWAYS.AUTH_GATEWAY,
   );
   const session = await authGateway.getSession();
   if (!session?.user) return null;
 
-  const conversations = await api.conversation.list({
+  const conversations = await api.kernel.conversation.list({
     id: rc_id_int,
     xAuthToken: env.KP_AUTH_TOKEN,
   });

src/app/[rc_id]/sources/page.tsx

@@ -1,9 +1,9 @@
 import { env } from "~/env";
 import { redirect } from "next/navigation";
-import { api } from "~/lib/infrastructure/server/trpc/server-api";
 import type AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
-import { GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import { GATEWAYS, TRPC } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import type { TServerComponentAPI } from "~/lib/infrastructure/server/trpc/server-api";
 
 export default async function Home(
     { params }: { params: { rc_id: string } }
@@ -19,14 +19,14 @@ export default async function Home(
 }
 
 async function ListSourceData({ rc_id }: { rc_id: string }) {
-
+  const api: TServerComponentAPI = serverContainer.get(TRPC.REACT_SERVER_COMPONENTS_API);
   const rc_id_int = parseInt(rc_id);
 
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(GATEWAYS.AUTH_GATEWAY);
   const session = await authGateway.getSession();
   if (!session?.user) return null;
 
-  const sourceData = await api.sourceData.listForResearchContext(
+  const sourceData = await api.kernel.sourceData.listForResearchContext(
     {
         researchContextId: rc_id_int,
         xAuthToken: env.KP_AUTH_TOKEN

src/app/_components/create-post.tsx

@@ -2,13 +2,16 @@
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { api } from "~/lib/infrastructure/client/trpc/react";
+import clientContainer from "~/lib/infrastructure/client/config/ioc/client-container";
+import type { TClientComponentAPI } from "~/lib/infrastructure/client/trpc/react-api";
+import { TRPC } from "~/lib/infrastructure/client/config/ioc/client-ioc-symbols";
 
 
 export function CreatePost() {
   const router = useRouter();
   const [name, setName] = useState("");
 
+  const api = clientContainer.get<TClientComponentAPI>(TRPC.REACT_CLIENT_COMPONENTS_API);
   const createPost = api.post.create.useMutation({
     onSuccess: () => {
       router.refresh();

src/app/_components/dummy-download.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { api } from "~/lib/infrastructure/client/trpc/react";
+import clientContainer from "~/lib/infrastructure/client/config/ioc/client-container";
+import type { TClientComponentAPI } from "~/lib/infrastructure/client/trpc/react-api";
+import { TRPC } from "~/lib/infrastructure/client/config/ioc/client-ioc-symbols";
 
 export type DummyDownloadProps = {
     clientId: number,
@@ -13,7 +15,8 @@ export type DummyDownloadProps = {
 export function DummyDownloadComponent(
     props: DummyDownloadProps
 ) {
-    const downloadSourceDataMutation = api.sourceData.download.useMutation({
+    const api = clientContainer.get<TClientComponentAPI>(TRPC.REACT_CLIENT_COMPONENTS_API);
+    const downloadSourceDataMutation = api.kernel.sourceData.download.useMutation({
         onSuccess: () => {
             console.log("Source data downloaded");
         },

src/app/_components/dummy-send-message.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { api } from "~/lib/infrastructure/client/trpc/react";
+import clientContainer from "~/lib/infrastructure/client/config/ioc/client-container";
+import type { TClientComponentAPI } from "~/lib/infrastructure/client/trpc/react-api";
+import { TRPC } from "~/lib/infrastructure/client/config/ioc/client-ioc-symbols";
 
 export type DummySendMessageProps = {
     conversationId: number,
@@ -11,7 +13,8 @@ export type DummySendMessageProps = {
 export function DummySendMessage(
     props: DummySendMessageProps
 ) {
-    const sendMessageMutation = api.message.create.useMutation({
+    const api = clientContainer.get<TClientComponentAPI>(TRPC.REACT_CLIENT_COMPONENTS_API);
+    const sendMessageMutation = api.kernel.message.create.useMutation({
         onSuccess: () => {
             console.log("Message sent");
         },

src/app/_components/dummy-upload.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { api } from "~/lib/infrastructure/client/trpc/react";
+import clientContainer from "~/lib/infrastructure/client/config/ioc/client-container";
+import type { TClientComponentAPI } from "~/lib/infrastructure/client/trpc/react-api";
+import { TRPC } from "~/lib/infrastructure/client/config/ioc/client-ioc-symbols";
 
 export type DummyUploadProps = {
     clientId: number,
@@ -13,7 +15,8 @@ export type DummyUploadProps = {
 export function DummyUploadComponent(
     props: DummyUploadProps
 ) {
-    const uploadSourceDataMutation = api.sourceData.create.useMutation({
+    const api = clientContainer.get<TClientComponentAPI>(TRPC.REACT_CLIENT_COMPONENTS_API);
+    const uploadSourceDataMutation = api.kernel.sourceData.create.useMutation({
         onSuccess: () => {
             console.log("Source data uploaded");
         },

src/app/_components/list-research-contexts.tsx

@@ -1,7 +1,9 @@
 "use client";
 import { ResearchContextPage } from "@maany_shr/planckster-ui-kit";
 import { type ResearchContext } from "node_modules/@maany_shr/kernel-planckster-sdk-ts";
-import { api } from "~/lib/infrastructure/client/trpc/react";
+import clientContainer from "~/lib/infrastructure/client/config/ioc/client-container";
+import type { TClientComponentAPI } from "~/lib/infrastructure/client/trpc/react-api";
+import { TRPC } from "~/lib/infrastructure/client/config/ioc/client-ioc-symbols";
 
 export type ListResearchContextsPageProps = {
   researchContexts: ResearchContext[];
@@ -15,7 +17,8 @@ export type ListResearchContextsPageProps = {
   )
  }
 export function ListResearchContextsPage(props: ListResearchContextsPageProps) {
-  const addNewContextMutation = api.researchContext.create.useMutation({
+  const api = clientContainer.get<TClientComponentAPI>(TRPC.REACT_CLIENT_COMPONENTS_API);
+  const addNewContextMutation = api.kernel.researchContext.create.useMutation({
     onSuccess: () => {
       // TODO: handle success
       console.log("Context created");

src/app/api/trpc/[trpc]/route.ts

@@ -2,7 +2,9 @@ import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { type NextRequest } from "next/server";
 
 import { env } from "~/env";
-import { appRouter } from "~/lib/infrastructure/server/trpc/app-router";
+import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
+import { TRPC } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import { type AppRouter } from "~/lib/infrastructure/server/trpc/app-router";
 import { createTRPCContext } from "~/lib/infrastructure/server/trpc/server";
 
 /**
@@ -15,8 +17,9 @@ const createContext = async (req: NextRequest) => {
   });
 };
 
-const handler = (req: NextRequest) =>
-  fetchRequestHandler({
+const handler = (req: NextRequest) => {
+  const appRouter: AppRouter = serverContainer.get(TRPC.APP_ROUTER);
+  return fetchRequestHandler({
     endpoint: "/api/trpc",
     req,
     router: appRouter,
@@ -29,6 +32,6 @@ const handler = (req: NextRequest) =>
             );
           }
         : undefined,
-  });
+  })};
 
 export { handler as GET, handler as POST };

src/app/layout.tsx

@@ -2,7 +2,7 @@ import "~/styles/globals.css";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
 
 import { Inter } from "next/font/google";
-import { TRPCReactProvider } from "~/lib/infrastructure/client/trpc/react";
+import { TRPCReactProvider } from "~/lib/infrastructure/client/trpc/react-provider";
 
 // Explicitly load the container to ensure all dependencies are loaded, else the optimization of the build will fail
 serverContainer.load();

src/app/page.tsx

@@ -4,8 +4,8 @@ import { ListResearchContextsPage } from "./_components/list-research-contexts";
 import type { ResearchContext } from "@maany_shr/kernel-planckster-sdk-ts";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
 import type AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
-import { GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
-import { api } from "~/lib/infrastructure/server/trpc/server-api";
+import { GATEWAYS, TRPC } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import type { TServerComponentAPI } from "~/lib/infrastructure/server/trpc/server-api";
 export default async function Home() {
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(GATEWAYS.AUTH_GATEWAY);
   const session = await authGateway.getSession();
@@ -19,10 +19,12 @@ export default async function Home() {
 
 async function ListResearchContexts() {
   const isConnected = false
+  const api: TServerComponentAPI = serverContainer.get(TRPC.REACT_SERVER_COMPONENTS_API);
+
   let researchContexts: ResearchContext[] = [];
 
   if (isConnected) {
-    researchContexts = await api.researchContext.list(
+    researchContexts = await api.kernel.researchContext.list(
       { id: env.KP_CLIENT_ID, xAuthToken: env.KP_AUTH_TOKEN },
     );
   }

src/app/sources/page.tsx

@@ -2,10 +2,10 @@ import { env } from "~/env";
 import { redirect } from "next/navigation";
 import { DummyUploadComponent } from "../_components/dummy-upload";
 import { DummyDownloadComponent } from "../_components/dummy-download";
-import { api } from "~/lib/infrastructure/server/trpc/server-api";
 import type AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
-import { GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import { GATEWAYS, TRPC } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import type { TServerComponentAPI } from "~/lib/infrastructure/server/trpc/server-api";
 
 export default async function Home() {
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(
@@ -19,13 +19,14 @@ export default async function Home() {
 }
 
 async function ListSourceData() {
+  const api: TServerComponentAPI = serverContainer.get(TRPC.REACT_SERVER_COMPONENTS_API);
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(
     GATEWAYS.AUTH_GATEWAY,
   );
   const session = await authGateway.getSession();
   if (!session?.user) return null;
 
-  const sourceData = await api.sourceData.listForClient({
+  const sourceData = await api.kernel.sourceData.listForClient({
     clientId: env.KP_CLIENT_ID,
     xAuthToken: env.KP_AUTH_TOKEN,
   });

src/lib/infrastructure/client/config/ioc/client-container.ts

@@ -1,7 +1,10 @@
 import "reflect-metadata";
 import { Container } from "inversify";
+import { TRPC } from "./client-ioc-symbols";
+import { api } from "~/lib/infrastructure/client/trpc/react-api";
 
 const clientContainer = new Container();
 
+clientContainer.bind(TRPC.REACT_CLIENT_COMPONENTS_API).toConstantValue(api);
 
 export default  clientContainer;

src/lib/infrastructure/client/config/ioc/client-ioc-symbols.ts

@@ -1,5 +1,6 @@
-const SIGNALS = {
-    S_CLIENT_KP_CONNECTION_STATUS: Symbol.for("S_KP_CONNECTION_STATUS"),
+export const SIGNALS = {
 }
 
-export { SIGNALS };
+export const TRPC = {
+    REACT_CLIENT_COMPONENTS_API: Symbol("TRPC_REACT_CLIENT_API"),
+}

src/lib/infrastructure/client/trpc/react-api.ts

@@ -0,0 +1,8 @@
+"use client";
+
+import { createTRPCReact } from "@trpc/react-query";
+import type { AppRouter } from "~/lib/infrastructure/server/trpc/app-router";
+
+export const api = createTRPCReact<AppRouter>();
+
+export type TClientComponentAPI = typeof api;

src/lib/infrastructure/client/trpc/react.tsx → src/lib/infrastructure/client/trpc/react-provider.tsx

@@ -1,14 +1,11 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
-import { createTRPCReact } from "@trpc/react-query";
 import { useState } from "react";
 import SuperJSON from "superjson";
-import type { AppRouter } from "~/lib/infrastructure/server/trpc/app-router";
+import { api } from "./react-api";
 
 
 const createQueryClient = () => new QueryClient();
@@ -23,7 +20,6 @@ const getQueryClient = () => {
   return (clientQueryClientSingleton ??= createQueryClient());
 };
 
-export const api = createTRPCReact<AppRouter>();
 
 export function TRPCReactProvider(props: { children: React.ReactNode }) {
   const queryClient = getQueryClient();

src/lib/infrastructure/server/config/ioc/server-container.ts

@@ -1,9 +1,11 @@
 import "reflect-metadata";
 import { Container } from "inversify";
-import { CONSTANTS, GATEWAYS } from "./server-ioc-symbols";
-import { authOptions } from "../auth/next-auth-config";
+import { CONSTANTS, GATEWAYS, TRPC } from "./server-ioc-symbols";
+import { authOptions } from "~/lib/infrastructure/server/config/auth/next-auth-config";
 import type AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
-import NextAuthGateway from "../../gateway/next-auth-gateway";
+import NextAuthGateway from "~/lib/infrastructure/server/gateway/next-auth-gateway";
+import { appRouter } from "~/lib/infrastructure/server/trpc/app-router";
+import { api } from "~/lib/infrastructure/server/trpc/server-api";
 
 
 const serverContainer = new Container();
@@ -12,8 +14,14 @@ const serverContainer = new Container();
 serverContainer.bind(CONSTANTS.NEXT_AUTH_OPTIONS).toConstantValue(authOptions);
 
 /** TRPC Server Side Router */
+serverContainer.bind(TRPC.APP_ROUTER).toConstantValue(appRouter);
+
+/** TRPC Server API : Should be used ONLY in Server Components */
+serverContainer.bind(TRPC.REACT_SERVER_COMPONENTS_API).toConstantValue(api);
 
 /**AuthGatewayOutputPort */
 serverContainer.bind<AuthGatewayOutputPort>(GATEWAYS.AUTH_GATEWAY).to(NextAuthGateway).inSingletonScope();
+
+
 export default serverContainer;
 

src/lib/infrastructure/server/config/ioc/server-ioc-symbols.ts

@@ -5,6 +5,11 @@ export const CONSTANTS = {
     NEXT_AUTH_OPTIONS: Symbol.for('NEXT_AUTH_OPTIONS'),
 }
 
+export const TRPC = {
+    APP_ROUTER: Symbol.for('APP_ROUTER'),
+    REACT_SERVER_COMPONENTS_API: Symbol.for('SERVER_API'),
+}
+
 export const GATEWAYS = {
     AUTH_GATEWAY: Symbol.for('AUTH_GATEWAY'),
     TRPC: Symbol.for('TRPC'),