From 29a29a13960fa7cd97196a07561e24cef5f8834d Mon Sep 17 00:00:00 2001 From: Steve Perkins Date: Mon, 11 Dec 2023 14:41:57 -0500 Subject: [PATCH 1/2] wip: separate web / mobile trpc client --- packages/common/src/services/index.ts | 1 - packages/mobile/src/app/TrpcProvider.tsx | 3 +- .../src/components/user/FollowsYouChip.tsx | 3 +- .../mobile/src/services/trpc-client-mobile.ts | 35 +++++++++++++++++++ packages/web/src/app/TrpcProvider.tsx | 3 +- .../user-badges/FollowsYouBadge.tsx | 3 +- .../web/src/pages/demo-trpc/DemoTrpcPage.tsx | 3 +- .../src/utils/trpcClientWeb.ts} | 0 8 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 packages/mobile/src/services/trpc-client-mobile.ts rename packages/{common/src/services/trpc-client.ts => web/src/utils/trpcClientWeb.ts} (100%) diff --git a/packages/common/src/services/index.ts b/packages/common/src/services/index.ts index 6ce87f50c48..2b426d4efd8 100644 --- a/packages/common/src/services/index.ts +++ b/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' diff --git a/packages/mobile/src/app/TrpcProvider.tsx b/packages/mobile/src/app/TrpcProvider.tsx index 0d184493d34..2fd41fecb50 100644 --- a/packages/mobile/src/app/TrpcProvider.tsx +++ b/packages/mobile/src/app/TrpcProvider.tsx @@ -1,6 +1,7 @@ import React, { useMemo, useState } from 'react' -import { accountSelectors, createAudiusTrpcClient, trpc } from '@audius/common' +import { accountSelectors } from '@audius/common' +import { createAudiusTrpcClient, trpc } from 'app/services/trpc-client-mobile' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { useSelector } from 'react-redux' diff --git a/packages/mobile/src/components/user/FollowsYouChip.tsx b/packages/mobile/src/components/user/FollowsYouChip.tsx index 6b4e170d2a2..82fa8abb65f 100644 --- a/packages/mobile/src/components/user/FollowsYouChip.tsx +++ b/packages/mobile/src/components/user/FollowsYouChip.tsx @@ -1,10 +1,11 @@ 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 { makeStyles } from 'app/styles' +import { trpc } from 'app/services/trpc-client-mobile' const messages = { followsYou: 'Follows You' diff --git a/packages/mobile/src/services/trpc-client-mobile.ts b/packages/mobile/src/services/trpc-client-mobile.ts new file mode 100644 index 00000000000..7da5b3045f4 --- /dev/null +++ b/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() + +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' +} diff --git a/packages/web/src/app/TrpcProvider.tsx b/packages/web/src/app/TrpcProvider.tsx index b427adffff5..a093ec8c9ee 100644 --- a/packages/web/src/app/TrpcProvider.tsx +++ b/packages/web/src/app/TrpcProvider.tsx @@ -1,6 +1,7 @@ import { ReactNode, useMemo, useState } from 'react' -import { accountSelectors, createAudiusTrpcClient, trpc } from '@audius/common' +import { accountSelectors } from '@audius/common' +import { createAudiusTrpcClient, trpc } from '../utils/trpcClientWeb' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { useSelector } from 'react-redux' diff --git a/packages/web/src/components/user-badges/FollowsYouBadge.tsx b/packages/web/src/components/user-badges/FollowsYouBadge.tsx index 4eb066e29b4..755cc6e02c9 100644 --- a/packages/web/src/components/user-badges/FollowsYouBadge.tsx +++ b/packages/web/src/components/user-badges/FollowsYouBadge.tsx @@ -1,4 +1,5 @@ -import { ID, accountSelectors, trpc } from '@audius/common' +import { ID, accountSelectors } from '@audius/common' +import { trpc } from 'utils/trpcClientWeb' import { useSelector } from 'react-redux' import { useWithMobileStyle } from 'hooks/useWithMobileStyle' diff --git a/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx b/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx index fcc6420048e..f6dcf5e0a03 100644 --- a/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx +++ b/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx @@ -1,6 +1,7 @@ import { CSSProperties, Suspense, useMemo, useState } from 'react' -import { accountSelectors, trpc } from '@audius/common' +import { accountSelectors } from '@audius/common' +import { trpc } from 'utils/trpcClientWeb' import { RouterInput } from '@audius/trpc-server' import { useSelector } from 'react-redux' import { create } from 'zustand' diff --git a/packages/common/src/services/trpc-client.ts b/packages/web/src/utils/trpcClientWeb.ts similarity index 100% rename from packages/common/src/services/trpc-client.ts rename to packages/web/src/utils/trpcClientWeb.ts From faaef109b37f2d39d05d7ae84c05ed558880996c Mon Sep 17 00:00:00 2001 From: Steve Perkins Date: Mon, 11 Dec 2023 15:32:38 -0500 Subject: [PATCH 2/2] fix trpc mobile client --- packages/mobile/src/app/TrpcProvider.tsx | 3 ++- packages/mobile/src/components/user/FollowsYouChip.tsx | 2 +- packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx | 4 ++-- packages/trpc-server/src/trpc.ts | 2 +- packages/web/src/app/TrpcProvider.tsx | 3 ++- packages/web/src/components/user-badges/FollowsYouBadge.tsx | 2 +- packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx | 3 ++- 7 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/mobile/src/app/TrpcProvider.tsx b/packages/mobile/src/app/TrpcProvider.tsx index 2fd41fecb50..06a5f0ff25d 100644 --- a/packages/mobile/src/app/TrpcProvider.tsx +++ b/packages/mobile/src/app/TrpcProvider.tsx @@ -1,10 +1,11 @@ import React, { useMemo, useState } from 'react' import { accountSelectors } from '@audius/common' -import { createAudiusTrpcClient, trpc } from 'app/services/trpc-client-mobile' 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 }: { diff --git a/packages/mobile/src/components/user/FollowsYouChip.tsx b/packages/mobile/src/components/user/FollowsYouChip.tsx index 82fa8abb65f..4e06cadf106 100644 --- a/packages/mobile/src/components/user/FollowsYouChip.tsx +++ b/packages/mobile/src/components/user/FollowsYouChip.tsx @@ -4,8 +4,8 @@ import { View } from 'react-native' import { useSelector } from 'react-redux' import { Text } from 'app/components/core' -import { makeStyles } from 'app/styles' import { trpc } from 'app/services/trpc-client-mobile' +import { makeStyles } from 'app/styles' const messages = { followsYou: 'Follows You' diff --git a/packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx b/packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx index acbb1a70f68..dafa7554831 100644 --- a/packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx +++ b/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' diff --git a/packages/trpc-server/src/trpc.ts b/packages/trpc-server/src/trpc.ts index daecdd223a7..5068cec5e7f 100644 --- a/packages/trpc-server/src/trpc.ts +++ b/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']) { diff --git a/packages/web/src/app/TrpcProvider.tsx b/packages/web/src/app/TrpcProvider.tsx index a093ec8c9ee..04fcf47bd1c 100644 --- a/packages/web/src/app/TrpcProvider.tsx +++ b/packages/web/src/app/TrpcProvider.tsx @@ -1,10 +1,11 @@ import { ReactNode, useMemo, useState } from 'react' import { accountSelectors } from '@audius/common' -import { createAudiusTrpcClient, trpc } from '../utils/trpcClientWeb' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { useSelector } from 'react-redux' +import { createAudiusTrpcClient, trpc } from '../utils/trpcClientWeb' + type TrpcProviderProps = { children: ReactNode } diff --git a/packages/web/src/components/user-badges/FollowsYouBadge.tsx b/packages/web/src/components/user-badges/FollowsYouBadge.tsx index 755cc6e02c9..389130b0e1b 100644 --- a/packages/web/src/components/user-badges/FollowsYouBadge.tsx +++ b/packages/web/src/components/user-badges/FollowsYouBadge.tsx @@ -1,8 +1,8 @@ import { ID, accountSelectors } from '@audius/common' -import { trpc } from 'utils/trpcClientWeb' import { useSelector } from 'react-redux' import { useWithMobileStyle } from 'hooks/useWithMobileStyle' +import { trpc } from 'utils/trpcClientWeb' import styles from './FollowsYouBadge.module.css' diff --git a/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx b/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx index f6dcf5e0a03..195d7ac8448 100644 --- a/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx +++ b/packages/web/src/pages/demo-trpc/DemoTrpcPage.tsx @@ -1,11 +1,12 @@ import { CSSProperties, Suspense, useMemo, useState } from 'react' import { accountSelectors } from '@audius/common' -import { trpc } from 'utils/trpcClientWeb' 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']