Separate web / mobile trpc client

packages/common/src/services/index.ts

@@ -14,4 +14,3 @@ export * from './track-download'
 export * from './oauth'
 export * from './location'
 export * from './sdk'
-export * from './trpc-client'

packages/mobile/src/app/TrpcProvider.tsx

@@ -1,9 +1,11 @@
 import React, { useMemo, useState } from 'react'
 
-import { accountSelectors, createAudiusTrpcClient, trpc } from '@audius/common'
+import { accountSelectors } from '@audius/common'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
+import { createAudiusTrpcClient, trpc } from 'app/services/trpc-client-mobile'
+
 export const AudiusTrpcProvider = ({
   children
 }: {

packages/mobile/src/components/user/FollowsYouChip.tsx

@@ -1,9 +1,10 @@
 import type { ID } from '@audius/common'
-import { accountSelectors, trpc } from '@audius/common'
+import { accountSelectors } from '@audius/common'
 import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import { Text } from 'app/components/core'
+import { trpc } from 'app/services/trpc-client-mobile'
 import { makeStyles } from 'app/styles'
 
 const messages = {

packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx

@@ -7,8 +7,7 @@ import {
   ChatPermissionAction,
   cacheUsersSelectors,
   formatCount,
-  useInboxUnavailableModal,
-  trpc
+  useInboxUnavailableModal
 } from '@audius/common'
 import { useSelector } from 'audius-client/src/common/hooks/useSelector'
 import { View, TouchableOpacity, Keyboard } from 'react-native'
@@ -20,6 +19,7 @@ import IconUser from 'app/assets/images/iconUser.svg'
 import { Text } from 'app/components/core'
 import { ProfilePicture } from 'app/components/user'
 import { UserBadges } from 'app/components/user-badges'
+import { trpc } from 'app/services/trpc-client-mobile'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
 

packages/mobile/src/services/trpc-client-mobile.ts

@@ -0,0 +1,35 @@
+import type { AppRouter } from '@audius/trpc-server'
+import { createTRPCReact, httpBatchLink } from '@trpc/react-query'
+import Config from 'react-native-config'
+
+export const trpc = createTRPCReact<AppRouter>()
+
+export function createAudiusTrpcClient(currentUserId: number | null) {
+  return trpc.createClient({
+    links: [
+      httpBatchLink({
+        url: getTrpcEndpoint(),
+        maxURLLength: 2083,
+        headers() {
+          if (!currentUserId) return {}
+          return {
+            'x-current-user-id': '' + currentUserId
+          }
+        }
+      })
+    ]
+  })
+}
+
+// this hardcodes some dedicated nodes for dev/stage/prod
+// since tRPC server is deployed manually atm.
+// in the future some tRPC middleware can set host to currently selected DN per request
+function getTrpcEndpoint() {
+  switch (Config.ENVIRONMENT) {
+    case 'production':
+      return 'https://discoveryprovider3.audius.co/trpc/trpc'
+    case 'staging':
+      return 'https://discoveryprovider3.staging.audius.co/trpc/trpc'
+  }
+  return 'http://localhost:2022/trpc'
+}

packages/trpc-server/src/trpc.ts

@@ -20,7 +20,7 @@ const requiresCurrentUserIdHeader = t.procedure.use(
 )
 
 export async function createContext(opts: any) {
-  let currentUserId = undefined
+  let currentUserId: number | undefined = undefined
   if (opts.req.headers['x-current-user-id']) {
     currentUserId = parseInt(opts.req.headers['x-current-user-id'])
   } else if (opts.req.query['currentUserId']) {

packages/web/src/app/TrpcProvider.tsx

@@ -1,9 +1,11 @@
 import { ReactNode, useMemo, useState } from 'react'
 
-import { accountSelectors, createAudiusTrpcClient, trpc } from '@audius/common'
+import { accountSelectors } from '@audius/common'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
+import { createAudiusTrpcClient, trpc } from '../utils/trpcClientWeb'
+
 type TrpcProviderProps = {
   children: ReactNode
 }

packages/web/src/components/user-badges/FollowsYouBadge.tsx

@@ -1,7 +1,8 @@
-import { ID, accountSelectors, trpc } from '@audius/common'
+import { ID, accountSelectors } from '@audius/common'
 import { useSelector } from 'react-redux'
 
 import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
+import { trpc } from 'utils/trpcClientWeb'
 
 import styles from './FollowsYouBadge.module.css'
 

packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx

@@ -1,10 +1,12 @@
 import { CSSProperties, Suspense, useMemo, useState } from 'react'
 
-import { accountSelectors, trpc } from '@audius/common'
+import { accountSelectors } from '@audius/common'
 import { RouterInput } from '@audius/trpc-server'
 import { useSelector } from 'react-redux'
 import { create } from 'zustand'
 
+import { trpc } from 'utils/trpcClientWeb'
+
 // ==================== Store ====================
 
 type SocialQuery = RouterInput['users']['listUserIds']