feat(WEB-127): add trpc to handle requests both serverside and clientside

lib/graphql/batchRequest.ts

@@ -4,15 +4,19 @@ import { request } from "./request"
 import type { Data } from "@/types/request"
 import type { BatchRequestDocument } from "graphql-request"
 
-export async function batchRequest<T>(queries: (BatchRequestDocument & NextFetchRequestConfig)[]): Promise<Data<T>> {
+export async function batchRequest<T>(
+  queries: (BatchRequestDocument & NextFetchRequestConfig)[]
+): Promise<Data<T>> {
   try {
     const response = await Promise.allSettled(
-      queries.map(query => request<T>(query.document, query.variables, { tags: query.tags }))
+      queries.map((query) =>
+        request<T>(query.document, query.variables, { tags: query.tags })
+      )
     )
 
     let data = {} as T
     const reasons = []
-    response.forEach(res => {
+    response.forEach((res) => {
       if (res.status === "fulfilled") {
         data = Object.assign({}, data, res.value.data)
       } else {

lib/graphql/previewRequest.ts

@@ -2,10 +2,10 @@ import "server-only"
 import { request as graphqlRequest } from "graphql-request"
 
 import { env } from "@/env/server"
+import ContentstackLivePreview from "@contentstack/live-preview-utils"
 
 import type { Data } from "@/types/request"
 import type { DocumentNode } from "graphql"
-import ContentstackLivePreview from "@contentstack/live-preview-utils"
 
 export async function previewRequest<T>(
   query: string | DocumentNode,

lib/graphql/request.ts

@@ -7,7 +7,10 @@ import type { Data } from "@/types/request"
 import type { DocumentNode } from "graphql"
 
 const client = new GraphQLClient(env.CMS_URL, {
-  fetch: cache(async function (url: URL | RequestInfo, params: RequestInit | undefined) {
+  fetch: cache(async function (
+    url: URL | RequestInfo,
+    params: RequestInit | undefined
+  ) {
     return fetch(url, params)
   }),
 })
@@ -18,7 +21,6 @@ export async function request<T>(
   next?: NextFetchRequestConfig
 ): Promise<Data<T>> {
   try {
-
     if (next) {
       client.requestConfig.next = next
     }

lib/trpc/Provider.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { useState } from "react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { httpBatchLink } from "@trpc/client"
+
+import { api } from "./client"
+import { transformer } from "@/server/transformer"
+
+function initializeTrpcClient() {
+  return api.createClient({
+    links: [
+      httpBatchLink({
+        transformer,
+        url: "http://localhost:3000/api/trpc",
+      }),
+    ],
+  })
+}
+
+export default function TrpcProvider({ children }: React.PropsWithChildren) {
+  const [queryClient] = useState(() => new QueryClient({}))
+  const [trpcClient] = useState(() => initializeTrpcClient())
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  )
+}

lib/trpc/client.ts

@@ -0,0 +1,5 @@
+import { createTRPCReact } from "@trpc/react-query"
+
+import type { AppRouter } from "@/server"
+
+export const api = createTRPCReact<AppRouter>({})

lib/trpc/server.ts

@@ -0,0 +1,9 @@
+import { appRouter } from "@/server"
+import { createContext } from "@/server/context"
+import { createCallerFactory } from "@/server/trpc"
+
+const createCaller = createCallerFactory(appRouter)
+
+export function serverClient() {
+  return createCaller(createContext())
+}