fix(trpc): avoid hard coding of host/port by using $fetch/fetch when … (

#639)
analogjs · Sep 14, 2023 · a30ac8a · a30ac8a
1 parent 3e836cb
commit a30ac8a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/apps/trpc-app/src/trpc-client.ts b/apps/trpc-app/src/trpc-client.ts
@@ -5,7 +5,7 @@ import superjson from 'superjson';
 
 export const { provideTrpcClient, TrpcClient, TrpcHeaders } =
   createTrpcClient<AppRouter>({
-    url: 'http://localhost:4205/api/trpc',
+    url: '/api/trpc',
     options: {
       transformer: superjson,
     },

diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "git config core.hookspath .githooks",
     "start": "nx serve",
-    "build": "nx run-many --target build --all --parallel=1 --exclude=trpc-app",
-    "e2e": "nx run-many --target e2e --all --parallel=1 --exclude analog-app-e2e-playwright,trpc-app-e2e-playwright",
+    "build": "nx run-many --target build --all --parallel=1",
+    "e2e": "nx run-many --target e2e --all --parallel=1 --exclude analog-app-e2e-playwright",
     "test": "nx run-many --target test --all",
     "build:vite-ci": "npm run build",
     "test:vite-ci": "nx run-many --target test --all",

diff --git a/packages/nx-plugin/src/generators/app/files/trpc/src/trpc-client.ts__template__ b/packages/nx-plugin/src/generators/app/files/trpc/src/trpc-client.ts__template__
@@ -3,7 +3,7 @@ import { createTrpcClient } from '@analogjs/trpc';
 import { inject } from '@angular/core';
 
 export const { provideTrpcClient, TrpcClient } = createTrpcClient<AppRouter>({
-  url: 'http://127.0.0.1:4200/api/trpc',
+  url: '/api/trpc',
 });
 
 export function injectTrpcClient() {

diff --git a/packages/trpc/src/lib/client/client.ts b/packages/trpc/src/lib/client/client.ts
@@ -11,6 +11,7 @@ import {
 import { createTRPCRxJSProxyClient } from './trpc-rxjs-proxy';
 import { CreateTRPCClientOptions } from '@trpc/client/src/createTRPCUntypedClient';
 import { HTTPHeaders } from '@trpc/client/src/links/types';
+import { FetchEsque } from '@trpc/client/dist/internals/types';
 
 export type TrpcOptions<T extends AnyRouter> = {
   url: string;
@@ -25,6 +26,25 @@ const tRPC_INJECTION_TOKEN = new InjectionToken<unknown>(
   '@analogjs/trpc proxy client'
 );
 
+function customFetch(
+  input: RequestInfo | URL,
+  init?: RequestInit & { method: 'GET' }
+) {
+  if ((globalThis as any).$fetch) {
+    return (globalThis as any).$fetch
+      .raw(input.toString(), init)
+      .catch((e: any) => {
+        throw e;
+      })
+      .then((response: any) => ({
+        ...response,
+        headers: response.headers,
+        json: () => Promise.resolve(response._data),
+      }));
+  }
+  return fetch(input, init);
+}
+
 export const createTrpcClient = <AppRouter extends AnyRouter>({
   url,
   options,
@@ -49,6 +69,7 @@ export const createTrpcClient = <AppRouter extends AnyRouter>({
               headers() {
                 return TrpcHeaders();
               },
+              fetch: customFetch as FetchEsque,
               url: url ?? '',
             }),
           ],