feat: integrate trpc to app

app/package.json

@@ -20,6 +20,7 @@
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/models": "*",
     "@linux-odyssey/utils": "*",
+    "@trpc/client": "^11.1.0",
     "@types/dompurify": "^3.0.5",
     "axios": "^1.6.0",
     "dompurify": "^3.0.6",

app/src/components/header/GameHeaderComponents.vue

@@ -3,7 +3,7 @@ import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
-import { surveyUrl } from '../../config'
+import { trpc } from '../../utils/trpc'
 import { openBugReport } from '../../utils/formbricks'
 import useSession from '../../store/session'
 import useUserProfile from '../../store/userProfile'
@@ -26,6 +26,11 @@ const handleLogout = async () => {
   }
 }
 
+const openSurvey = async () => {
+  const surveyUrl = await trpc.links.surveyLink.query()
+  window.open(surveyUrl, '_blank')
+}
+
 onMounted(async () => {
   try {
     await userStore.loadUserProfile()
@@ -61,18 +66,18 @@ onMounted(async () => {
   >
     {{ userStore.username }}
   </p>
-  <a
+  <button
     title="Survey"
-    :href="surveyUrl"
     target="_blank"
     class="md:h-5 md:w-5 px-1.5 w-auto"
+    @click="openSurvey"
   >
     <font-awesome-icon
       :icon="['fas', 'file-invoice']"
       class="text-text-primary inline"
     />
     <span class="text-text sm:hidden px-2">Survey</span>
-  </a>
+  </button>
   <RouterLink
     title="LeaderBoard"
     to="/leaderboard"

app/src/utils/trpc.ts

@@ -0,0 +1,16 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import type { AppRouter } from 'server/src/routers'
+
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: '/trpc',
+      // You can pass any HTTP headers you wish here
+      // async headers() {
+      //   return {
+      //     authorization: getAuthCookie(),
+      //   }
+      // },
+    }),
+  ],
+})

app/vite.config.ts

@@ -6,6 +6,11 @@ export default defineConfig({
   plugins: [vue()],
   server: {
     proxy: {
+      '/trpc': {
+        target: process.env.API_TARGET || 'http://localhost:3000',
+        changeOrigin: false,
+        xfwd: true,
+      },
       '/api': {
         target: process.env.API_TARGET || 'http://localhost:3000',
         changeOrigin: false,

server/src/routers/index.ts

@@ -1,11 +1,12 @@
 import { router, publicProcedure } from '../trpc.js'
+import { linkRouter } from './linkRouter.js'
 
 export const appRouter = router({
   userList: publicProcedure.query(async (opts) => {
     // Retrieve users from a datasource, this is an imaginary database
     return opts.ctx
   }),
+  links: linkRouter,
 })
-// Export type router type signature,
-// NOT the router itself.
+
 export type AppRouter = typeof appRouter

server/src/routers/linkRouter.ts

@@ -0,0 +1,11 @@
+import config from '../config.js'
+import { publicProcedure, router } from '../trpc.js'
+
+export const linkRouter = router({
+  surveyLink: publicProcedure.query(() => {
+    return config.surveyUrl
+  }),
+  bugReportLink: publicProcedure.query(() => {
+    return config.bugReportUrl
+  }),
+})

yarn.lock

@@ -1711,6 +1711,11 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@trpc/client@^11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@trpc/client/-/client-11.1.0.tgz#102ec1f14aa39c4caf5106c51f38a3d4bee293b0"
+  integrity sha512-Q3pL4p7AddxI/ZJTEFo1utKSdasDFjZPECIPsKDkthEt52k530JkYVltTdLkYFKrNWXKKBo8MN7NwchelczoRw==
+
 "@trpc/server@^11.1.0":
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/@trpc/server/-/server-11.1.0.tgz#8169fa8b944beddf65a95f376d4afea5732be254"