Merge pull request #29 from biensupernice/chore/update-trpc

Update to tRPC v10

package.json

@@ -11,14 +11,15 @@
     "@expo/results": "^1.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.0.0",
-    "@trpc/client": "^9.27.2",
-    "@trpc/next": "^9.27.2",
-    "@trpc/react": "^9.27.2",
-    "@trpc/server": "^9.27.2",
+    "@tanstack/react-query": "^4.26.1",
+    "@trpc/client": "^10.16.0",
+    "@trpc/next": "^10.16.0",
+    "@trpc/react-query": "^10.16.0",
+    "@trpc/server": "^10.16.0",
     "@types/lodash-es": "^4.17.5",
-    "@types/node": "^14.14.6",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
+    "@types/node": "18.15.3",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/uuid": "^8.3.0",
     "axios": "^0.21.1",
     "class-variance-authority": "^0.7.0",
@@ -36,12 +37,11 @@
     "react-aria": "^3.19.0",
     "react-dom": "^18.2.0",
     "react-modal-sheet": "1.8.1",
-    "react-query": "^3.39.2",
     "react-spring-bottom-sheet": "^3.4.1",
     "react-stately": "^3.24.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.18.0",
+    "zod": "^3.21.4",
     "zustand": "^3.6.7"
   },
   "devDependencies": {
@@ -52,7 +52,7 @@
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.3.3",
-    "typescript": "4.7.4",
+    "typescript": "4.9.5",
     "uuid": "^8.3.2"
   }
 }

src/client/TracksScreen/TracksScreenContainer.tsx

@@ -79,18 +79,22 @@ export function useTracksScreenContainer() {
   };
 }
 
+export const playEpisodeMutationKey = {
+  queryKey: ["playEpisode"],
+};
+
 export function usePlayEpisodeMutation() {
-  const { fetchQuery } = trpc.useContext();
+  const utils = trpc.useUtils();
+  const fetchStreamUrl = utils["episode.getStreamUrl"].fetch;
+
   return useCustomMutation(
-    "playEpisode",
+    playEpisodeMutationKey.queryKey,
     async (episodeId: string) => {
-      const query = await fetchQuery(
-        [
-          "episode.getStreamUrl",
-          {
-            episodeId: episodeId,
-          },
-        ],
+      const query = await fetchStreamUrl(
+        {
+          episodeId: episodeId,
+        },
+
         {
           staleTime: Infinity,
         }

src/client/TracksScreen/TracksStore.tsx

@@ -1,27 +1,35 @@
-import { inferQueryOutput, trpc } from "@/utils/trpc";
+import { EpisodeRouter } from "@/server/router";
+import { trpc } from "@/utils/trpc";
+import { inferRouterOutputs } from "@trpc/server";
 
-export type ITrack = inferQueryOutput<"episodes.all">[number];
+export type RouterOutput = inferRouterOutputs<EpisodeRouter>;
+export type ITrack = RouterOutput["episodes.all"][number];
 
 export function useEpisodes() {
-  return trpc.useQuery(["episodes.all", { collective: "all" }], {
-    refetchOnWindowFocus: false,
-  });
+  return trpc["episodes.all"].useQuery(
+    { collective: "all" },
+    {
+      refetchOnWindowFocus: false,
+    }
+  );
 }
 
 export function useEpisode(id: string | undefined) {
-  const { getQueryData } = trpc.useContext();
+  const utils = trpc.useUtils();
+  const getData = utils["episodes.all"].getData;
 
   if (!id) {
     return null;
   }
-  const eps = getQueryData(["episodes.all"]) ?? [];
+  const eps = getData() ?? [];
 
   return eps.filter((e) => e._id === id)?.[0] || null;
 }
 
 export function useGetEpisode(id: string) {
-  const { getQueryData } = trpc.useContext();
+  const utils = trpc.useUtils();
+  const getData = utils["episodes.all"].getData;
 
-  const eps = getQueryData(["episodes.all", { collective: "all" }]) ?? [];
+  const eps = getData({ collective: "all" }) ?? [];
   return eps.filter((e) => e._id === id)[0];
 }

src/client/TracksScreen/useEpisodeAlbumArtColors.tsx

@@ -5,8 +5,8 @@ import { useEffect } from "react";
 export function useEpisodeAlbumArtColors() {
   const currentTrackId = usePlayerStore((state) => state.currentTrackId);
 
-  const { data } = trpc.useQuery(
-    ["episode.getAccentColor", { episodeId: currentTrackId }],
+  const { data } = trpc["episode.getAccentColor"].useQuery(
+    { episodeId: currentTrackId },
     {
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
@@ -19,7 +19,7 @@ export function useEpisodeAlbumArtColors() {
       const rgbString = data.rgb.join(" ");
 
       const [h, s, l] = data.hsl;
-      const hslString = `${h*360} ${s*100}% ${l*100}%`;
+      const hslString = `${h * 360} ${s * 100}% ${l * 100}%`;
 
       document.documentElement.style.setProperty("--accent", hslString);
     }

src/client/infra/useCustomMutation.tsx

@@ -7,7 +7,7 @@ import {
   useMutation,
   useIsMutating,
   useQueryClient,
-} from "react-query";
+} from "@tanstack/react-query";
 
 export const useCustomMutation = <
   TData = unknown,

src/pages/_app.tsx

@@ -4,8 +4,8 @@ import { loggerLink } from "@trpc/client/links/loggerLink";
 import { httpBatchLink } from "@trpc/client/links/httpBatchLink";
 import Head from "next/head";
 import { withTRPC } from "@trpc/next";
-import { AppRouter } from "./api/trpc/[trpc]";
 import { GoogleAnalytics } from "nextjs-google-analytics";
+import { EpisodeRouter } from "@/server/router";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -174,7 +174,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 }
 
 function getBaseUrl() {
-  if (process.browser) {
+  if (typeof window !== "undefined") {
     return "";
   }
   // reference for vercel.com
@@ -186,7 +186,7 @@ function getBaseUrl() {
   return `http://localhost:${process.env.PORT ?? 3000}`;
 }
 
-export default withTRPC<AppRouter>({
+export default withTRPC<EpisodeRouter>({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   config() {
     /**
@@ -201,7 +201,8 @@ export default withTRPC<AppRouter>({
         // adds pretty logs to your console in development and logs errors in production
         loggerLink({
           enabled: (opts) =>
-            process.env.NODE_ENV === "development" ||
+            (process.env.NODE_ENV === "development" &&
+              typeof window !== "undefined") ||
             (opts.direction === "down" && opts.result instanceof Error),
         }),
         httpBatchLink({

src/pages/api/internal/sync-episodes.ts

@@ -4,7 +4,6 @@ import _ from "lodash";
 import { SoundCloudApiClient } from "@/server/crosscutting/soundCloudApiClient";
 import { createDbConnection } from "@/server/db";
 import { Db } from "mongodb";
-import { ITrack } from "../trpc/[trpc]";
 
 function createLargeSoundtrackThumbUrl(url: string) {
   const newUrl = url.replace("-large", "-t500x500");