🇼🇮🇵 Refactor: Migrate to tRPC

bun.lock

@@ -27,11 +27,17 @@
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-toggle": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.2.3",
-        "@tanstack/react-query": "^5.66.9",
+        "@tanstack/react-query": "^5.74.4",
+        "@trpc/client": "^11.1.0",
+        "@trpc/next": "^11.1.0",
+        "@trpc/react-query": "^11.1.0",
+        "@trpc/server": "^11.1.0",
+        "@trpc/tanstack-react-query": "^11.1.0",
         "@types/mdx": "^2.0.13",
         "@upstash/ratelimit": "^2.0.1",
         "@upstash/redis": "^1.34.8",
         "class-variance-authority": "^0.7.1",
+        "client-only": "^0.0.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.0.0",
@@ -51,6 +57,7 @@
         "react-intersection-observer": "^9.16.0",
         "server-only": "^0.0.1",
         "sonner": "^2.0.3",
+        "superjson": "^2.2.2",
         "svix": "^1.64.1",
         "tailwind-merge": "^3.2.0",
         "tailwindcss-animate": "^1.0.7",
@@ -767,14 +774,24 @@
 
     "@tanstack/eslint-plugin-query": ["@tanstack/eslint-plugin-query@5.73.3", "", { "dependencies": { "@typescript-eslint/utils": "^8.18.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0" } }, "sha512-GmUtnOkRzDuNOq96g3eW5ADKC1nWfrM9RI0kRyQVr87rOl6y+PUgkuVaPxh3R2C0EVODxCS07b9aaWphidl/OA=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.66.4", "", {}, "sha512-skM/gzNX4shPkqmdTCSoHtJAPMTtmIJNS0hE+xwTTUVYwezArCT34NMermABmBVUg5Ls5aiUXEDXfqwR1oVkcA=="],
+    "@tanstack/query-core": ["@tanstack/query-core@5.74.4", "", {}, "sha512-YuG0A0+3i9b2Gfo9fkmNnkUWh5+5cFhWBN0pJAHkHilTx6A0nv8kepkk4T4GRt4e5ahbtFj2eTtkiPcVU1xO4A=="],
 
     "@tanstack/query-devtools": ["@tanstack/query-devtools@5.73.3", "", {}, "sha512-hBQyYwsOuO7QOprK75NzfrWs/EQYjgFA0yykmcvsV62q0t6Ua97CU3sYgjHx0ZvxkXSOMkY24VRJ5uv9f5Ik4w=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.66.9", "", { "dependencies": { "@tanstack/query-core": "5.66.4" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-NRI02PHJsP5y2gAuWKP+awamTIBFBSKMnO6UVzi03GTclmHHHInH5UzVgzi5tpu4+FmGfsdT7Umqegobtsp23A=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.74.4", "", { "dependencies": { "@tanstack/query-core": "5.74.4" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-mAbxw60d4ffQ4qmRYfkO1xzRBPUEf/72Dgo3qqea0J66nIKuDTLEqQt0ku++SDFlMGMnB6uKDnEG1xD/TDse4Q=="],
 
     "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.74.4", "", { "dependencies": { "@tanstack/query-devtools": "5.73.3" }, "peerDependencies": { "@tanstack/react-query": "^5.74.4", "react": "^18 || ^19" } }, "sha512-PGCAcytQMmeagoeGG45ccBhrC1x0/5OlNjsM1FAb9OfsQZIhPzjwjhGcwmMu6TbT4RIHgvjxLwC5NHgkUwJQzw=="],
 
+    "@trpc/client": ["@trpc/client@11.1.0", "", { "peerDependencies": { "@trpc/server": "11.1.0", "typescript": ">=5.7.2" } }, "sha512-Q3pL4p7AddxI/ZJTEFo1utKSdasDFjZPECIPsKDkthEt52k530JkYVltTdLkYFKrNWXKKBo8MN7NwchelczoRw=="],
+
+    "@trpc/next": ["@trpc/next@11.1.0", "", { "peerDependencies": { "@tanstack/react-query": "^5.59.15", "@trpc/client": "11.1.0", "@trpc/react-query": "11.1.0", "@trpc/server": "11.1.0", "next": "*", "react": ">=16.8.0", "react-dom": ">=16.8.0", "typescript": ">=5.7.2" }, "optionalPeers": ["@tanstack/react-query", "@trpc/react-query"] }, "sha512-P8/qpfvRs7IIDdFBrcyMfxXumgf5p7K+dig6NpxpNYs4bqVJfBnAbATYEplmLhw/Dcksqo5ZoI0+0A19wLm8Ug=="],
+
+    "@trpc/react-query": ["@trpc/react-query@11.1.0", "", { "peerDependencies": { "@tanstack/react-query": "^5.67.1", "@trpc/client": "11.1.0", "@trpc/server": "11.1.0", "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.7.2" } }, "sha512-qdqKdFM8hVy/YSBCg1/3VO+IgB6Nbul3Fk1SA3lefGf0bkYZdWVVyKab8HBAfOWlMsuRufhVLPdKYmnjzBrK9g=="],
+
+    "@trpc/server": ["@trpc/server@11.1.0", "", { "peerDependencies": { "typescript": ">=5.7.2" } }, "sha512-uAJ7ikejeujVkf53XFJ/0W8nr7bDjul+Szk5Rsepq97Hb/WS1RkRXdyX4KqAyCE9b1vDFCJVJwSxiIZdRtbTZQ=="],
+
+    "@trpc/tanstack-react-query": ["@trpc/tanstack-react-query@11.1.0", "", { "peerDependencies": { "@tanstack/react-query": "^5.67.1", "@trpc/client": "11.1.0", "@trpc/server": "11.1.0", "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.7.2" } }, "sha512-BRK5QWKAVHqvDyqjnGYp+53sgb5xE3MB1+fxrBKylVR1lFEeFQvUHwwY3Dtr/Pcq0mmxALytCsBVEGTiQCHnEw=="],
+
     "@tsconfig/node18": ["@tsconfig/node18@1.0.3", "", {}, "sha512-RbwvSJQsuN9TB04AQbGULYfOGE/RnSFk/FLQ5b0NmDf5Kx2q/lABZbHQPKCO1vZ6Fiwkplu+yb9pGdLy1iGseQ=="],
 
     "@types/acorn": ["@types/acorn@4.0.6", "", { "dependencies": { "@types/estree": "*" } }, "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ=="],
@@ -977,6 +994,8 @@
 
     "cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="],
 
+    "copy-anything": ["copy-anything@3.0.5", "", { "dependencies": { "is-what": "^4.1.8" } }, "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w=="],
+
     "cosmiconfig": ["cosmiconfig@7.1.0", "", { "dependencies": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", "parse-json": "^5.0.0", "path-type": "^4.0.0", "yaml": "^1.10.0" } }, "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA=="],
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
@@ -1345,6 +1364,8 @@
 
     "is-weakset": ["is-weakset@2.0.4", "", { "dependencies": { "call-bound": "^1.0.3", "get-intrinsic": "^1.2.6" } }, "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ=="],
 
+    "is-what": ["is-what@4.1.16", "", {}, "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="],
+
     "isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
 
     "isexe": ["isexe@3.1.1", "", {}, "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ=="],
@@ -1847,6 +1868,8 @@
 
     "stylis": ["stylis@4.2.0", "", {}, "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="],
 
+    "superjson": ["superjson@2.2.2", "", { "dependencies": { "copy-anything": "^3.0.2" } }, "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q=="],
+
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],

package.json

@@ -56,11 +56,17 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.2.3",
-    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-query": "^5.74.4",
+    "@trpc/client": "^11.1.0",
+    "@trpc/next": "^11.1.0",
+    "@trpc/react-query": "^11.1.0",
+    "@trpc/server": "^11.1.0",
+    "@trpc/tanstack-react-query": "^11.1.0",
     "@types/mdx": "^2.0.13",
     "@upstash/ratelimit": "^2.0.1",
     "@upstash/redis": "^1.34.8",
     "class-variance-authority": "^0.7.1",
+    "client-only": "^0.0.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.0.0",
@@ -80,6 +86,7 @@
     "react-intersection-observer": "^9.16.0",
     "server-only": "^0.0.1",
     "sonner": "^2.0.3",
+    "superjson": "^2.2.2",
     "svix": "^1.64.1",
     "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",

src/app/(app)/my-filters/page.tsx

@@ -1,11 +1,7 @@
 import type { Metadata } from "next";
-import {
-  dehydrate,
-  HydrationBoundary,
-  QueryClient,
-} from "@tanstack/react-query";
+import { api, getQueryClient } from "@/trpc/server";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 
-import { getBookmarkedFilters } from "@/actions/bookmark-filter";
 import {
   getUserCategories,
   getUserCategoryHierarchy,
@@ -26,16 +22,10 @@ export const metadata: Metadata = {
 };
 
 export default async function MyFiltersPage() {
-  const queryClient = new QueryClient();
+  const queryClient = getQueryClient();
+  void api.bookmarks.getBookmarkedFilters.prefetch();
 
   await Promise.all([
-    queryClient.prefetchQuery({
-      queryKey: ["bookmarked-filters"],
-      queryFn: async () => {
-        const [data] = await getBookmarkedFilters();
-        return data;
-      },
-    }),
     queryClient.prefetchQuery({
       queryKey: ["user-filters-by-category", null],
       queryFn: async () => {

src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,28 @@
+import { type NextRequest } from "next/server";
+import { appRouter } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+const createContext = async (req: NextRequest) => {
+  return createTRPCContext({
+    headers: req.headers,
+  });
+};
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext: () => createContext(req),
+    onError:
+      process.env.NODE_ENV === "development"
+        ? ({ path, error }) => {
+            console.error(
+              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
+            );
+          }
+        : undefined,
+  });
+
+export { handler as GET, handler as POST };

src/app/layout.tsx

@@ -7,10 +7,11 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { cn } from "@/lib/utils";
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/components/theme-provider";
-import { QueryProvider } from "@/providers/QueryProvider";
 
 import "./globals.css";
 
+import { TRPCReactProvider } from "@/trpc/client";
+
 import { siteConfig } from "@/config/site";
 import { OutboundLinkTracker } from "@/components/analytics/outbound-link-tracker";
 
@@ -95,7 +96,7 @@ export default function RootLayout({
             inter.variable,
           )}
         >
-          <QueryProvider>
+          <TRPCReactProvider>
             <ThemeProvider
               attribute='class'
               defaultTheme='system'
@@ -106,7 +107,7 @@ export default function RootLayout({
               <Toaster richColors />
             </ThemeProvider>
             <ReactQueryDevtools initialIsOpen={false} />
-          </QueryProvider>
+          </TRPCReactProvider>
           <OutboundLinkTracker />
         </body>
       </html>

src/components/filters/filter-card/bookmark-toggle.tsx

@@ -1,17 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { api } from "@/trpc/client";
 import { useUser } from "@clerk/nextjs";
 import type { ToggleProps } from "@radix-ui/react-toggle";
-import { useQueryClient } from "@tanstack/react-query";
 import { BookmarkIcon, Loader2Icon } from "lucide-react";
 import { toast } from "sonner";
 
-import { bookmarkFilter, getBookmarkedStatus } from "@/actions/bookmark-filter";
-import {
-  useServerActionMutation,
-  useServerActionQuery,
-} from "@/hooks/server-action-hooks";
 import { Toggle } from "@/components/ui/toggle";
 
 interface BookmarkToggleProps extends ToggleProps {
@@ -26,34 +21,31 @@ export function BookmarkToggle({
 }: BookmarkToggleProps) {
   const { isLoaded, isSignedIn } = useUser();
   const [isBookmarked, setIsBookmarked] = useState<boolean>(initialBookmarked);
-  const queryClient = useQueryClient();
 
-  const { data: bookmarkedData, isLoading } = useServerActionQuery(
-    getBookmarkedStatus,
-    {
-      input: { filterId },
-      queryKey: ["bookmarked", filterId],
-      enabled: isLoaded && isSignedIn && !initialBookmarked,
-    },
-  );
+  const utils = api.useUtils();
+  const { data: bookmarkedData, isLoading } =
+    api.bookmarks.getBookmarkedStatus.useQuery(
+      { filterId },
+      { enabled: isLoaded && isSignedIn && !initialBookmarked },
+    );
 
-  const mutation = useServerActionMutation(bookmarkFilter, {
+  const mutation = api.bookmarks.bookmark.useMutation({
     onSuccess: (data) => {
       setIsBookmarked(data.bookmarked);
       toast.success(
         data.bookmarked ? "Filter bookmarked" : "Filter unbookmarked",
       );
     },
-    onError: (err) => {
-      if (err.code === "NOT_AUTHORIZED") {
+    onError: (error) => {
+      if (error.data?.code === "UNAUTHORIZED") {
         toast.error("You must be signed in to bookmark a filter");
       } else {
         toast.error("An error occurred while bookmarking the filter");
       }
     },
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["bookmarked", filterId] });
-      queryClient.invalidateQueries({ queryKey: ["bookmarked-filters"] });
+      utils.bookmarks.getBookmarkedStatus.invalidate();
+      utils.bookmarks.getBookmarkedFilters.invalidate();
     },
   });
 

src/components/filters/saved-filters.tsx

@@ -1,14 +1,15 @@
 "use client";
 
+import { api } from "@/trpc/client";
 import { BookmarkPlusIcon, GlobeIcon } from "lucide-react";
 
-import { useGetBookmarkedFilters } from "@/hooks/use-get-bookmarked-filters";
 import { EmptyState } from "@/components/empty-state";
 
 import { BookmarkedFilterCard } from "../my-filters/bookmarked-filter-card";
 
 export function SavedFilters() {
-  const { data: bookmarkedFilters } = useGetBookmarkedFilters();
+  const { data: bookmarkedFilters } =
+    api.bookmarks.getBookmarkedFilters.useQuery();
 
   if (!bookmarkedFilters?.length) {
     return (

src/server/api/root.ts

@@ -0,0 +1,10 @@
+import { bookmarksRouter } from "@/server/api/routers/bookmarks";
+import { createCallerFactory, createTRPCRouter } from "@/server/api/trpc";
+
+export const appRouter = createTRPCRouter({
+  bookmarks: bookmarksRouter,
+});
+
+export type AppRouter = typeof appRouter;
+
+export const createCaller = createCallerFactory(appRouter);