refactor: migrate trpc to the new react query integration mode (#2438)

* refactor: migrate trpc to the new react query integration mode

* more fixes

* more migrations

* upgrade trpc client

8 files changed, 77 insertions, 51 deletions

diff --git a/apps/browser-extension/src/OptionsPage.tsx b/apps/browser-extension/src/OptionsPage.tsx
index cac32eff..1b1dc8b6 100644
--- a/apps/browser-extension/src/OptionsPage.tsx
+++ b/apps/browser-extension/src/OptionsPage.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "./components/ui/button";
@@ -17,27 +18,32 @@ import usePluginSettings, {
   DEFAULT_BADGE_CACHE_EXPIRE_MS,
 } from "./utils/settings";
 import { useTheme } from "./utils/ThemeProvider";
-import { api } from "./utils/trpc";
+import { useTRPC } from "./utils/trpc";
 
 export default function OptionsPage() {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { settings, setSettings } = usePluginSettings();
   const { setTheme, theme } = useTheme();
 
-  const { data: whoami, error: whoAmIError } = api.users.whoami.useQuery(
-    undefined,
-    {
+  const { data: whoami, error: whoAmIError } = useQuery(
+    api.users.whoami.queryOptions(undefined, {
       enabled: settings.address != "",
-    },
+    }),
   );
 
-  const { mutate: deleteKey } = api.apiKeys.revoke.useMutation();
+  const { mutate: deleteKey } = useMutation(
+    api.apiKeys.revoke.mutationOptions(),
+  );
 
-  const invalidateWhoami = api.useUtils().users.whoami.refetch;
+  const invalidateWhoami = () => {
+    queryClient.refetchQueries(api.users.whoami.queryFilter());
+  };
 
   useEffect(() => {
     invalidateWhoami();
-  }, [settings, invalidateWhoami]);
+  }, [settings]);
 
   let loggedInMessage: React.ReactNode;
   if (whoAmIError) {
diff --git a/apps/browser-extension/src/SavePage.tsx b/apps/browser-extension/src/SavePage.tsx
index b4b9ce95..5f55e164 100644
--- a/apps/browser-extension/src/SavePage.tsx
+++ b/apps/browser-extension/src/SavePage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 import { Navigate } from "react-router-dom";
 
 import {
@@ -9,33 +10,36 @@ import {
 
 import { NEW_BOOKMARK_REQUEST_KEY_NAME } from "./background/protocol";
 import Spinner from "./Spinner";
-import { api } from "./utils/trpc";
+import { useTRPC } from "./utils/trpc";
 import { MessageType } from "./utils/type";
 import { isHttpUrl } from "./utils/url";
 
 export default function SavePage() {
+  const api = useTRPC();
   const [error, setError] = useState<string | undefined>(undefined);
 
   const {
     data,
     mutate: createBookmark,
     status,
-  } = api.bookmarks.createBookmark.useMutation({
-    onError: (e) => {
-      setError("Something went wrong: " + e.message);
-    },
-    onSuccess: async () => {
-      // After successful creation, update badge cache and notify background
-      const [currentTab] = await chrome.tabs.query({
-        active: true,
-        lastFocusedWindow: true,
-      });
-      await chrome.runtime.sendMessage({
-        type: MessageType.BOOKMARK_REFRESH_BADGE,
-        currentTab: currentTab,
-      });
-    },
-  });
+  } = useMutation(
+    api.bookmarks.createBookmark.mutationOptions({
+      onError: (e) => {
+        setError("Something went wrong: " + e.message);
+      },
+      onSuccess: async () => {
+        // After successful creation, update badge cache and notify background
+        const [currentTab] = await chrome.tabs.query({
+          active: true,
+          lastFocusedWindow: true,
+        });
+        await chrome.runtime.sendMessage({
+          type: MessageType.BOOKMARK_REFRESH_BADGE,
+          currentTab: currentTab,
+        });
+      },
+    }),
+  );
   useEffect(() => {
     async function getNewBookmarkRequestFromBackgroundScriptIfAny(): Promise<ZNewBookmarkRequest | null> {
       const { [NEW_BOOKMARK_REQUEST_KEY_NAME]: req } =
diff --git a/apps/browser-extension/src/SignInPage.tsx b/apps/browser-extension/src/SignInPage.tsx
index 6cf8b35d..8a7229b6 100644
--- a/apps/browser-extension/src/SignInPage.tsx
+++ b/apps/browser-extension/src/SignInPage.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "./components/ui/button";
 import { Input } from "./components/ui/input";
 import Logo from "./Logo";
 import usePluginSettings from "./utils/settings";
-import { api } from "./utils/trpc";
+import { useTRPC } from "./utils/trpc";
 
 const enum LoginState {
   NONE = "NONE",
@@ -14,6 +15,7 @@ const enum LoginState {
 }
 
 export default function SignInPage() {
+  const api = useTRPC();
   const navigate = useNavigate();
   const { settings, setSettings } = usePluginSettings();
 
@@ -21,23 +23,27 @@ export default function SignInPage() {
     mutate: login,
     error: usernamePasswordError,
     isPending: userNamePasswordRequestIsPending,
-  } = api.apiKeys.exchange.useMutation({
-    onSuccess: (resp) => {
-      setSettings((s) => ({ ...s, apiKey: resp.key, apiKeyId: resp.id }));
-      navigate("/options");
-    },
-  });
+  } = useMutation(
+    api.apiKeys.exchange.mutationOptions({
+      onSuccess: (resp) => {
+        setSettings((s) => ({ ...s, apiKey: resp.key, apiKeyId: resp.id }));
+        navigate("/options");
+      },
+    }),
+  );
 
   const {
     mutate: validateApiKey,
     error: apiKeyValidationError,
     isPending: apiKeyValueRequestIsPending,
-  } = api.apiKeys.validate.useMutation({
-    onSuccess: () => {
-      setSettings((s) => ({ ...s, apiKey: apiKeyFormData.apiKey }));
-      navigate("/options");
-    },
-  });
+  } = useMutation(
+    api.apiKeys.validate.mutationOptions({
+      onSuccess: () => {
+        setSettings((s) => ({ ...s, apiKey: apiKeyFormData.apiKey }));
+        navigate("/options");
+      },
+    }),
+  );
 
   const [lastLoginAttemptSource, setLastLoginAttemptSource] =
     useState<LoginState>(LoginState.NONE);
diff --git a/apps/browser-extension/src/components/BookmarkLists.tsx b/apps/browser-extension/src/components/BookmarkLists.tsx
index 1d70d257..8debef5c 100644
--- a/apps/browser-extension/src/components/BookmarkLists.tsx
+++ b/apps/browser-extension/src/components/BookmarkLists.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import { X } from "lucide-react";
 
 import {
@@ -5,15 +6,18 @@ import {
   useRemoveBookmarkFromList,
 } from "@karakeep/shared-react/hooks/lists";
 
-import { api } from "../utils/trpc";
+import { useTRPC } from "../utils/trpc";
 import { Button } from "./ui/button";
 
 export default function BookmarkLists({ bookmarkId }: { bookmarkId: string }) {
+  const api = useTRPC();
   const { data: allLists } = useBookmarkLists();
 
   const { mutate: deleteFromList } = useRemoveBookmarkFromList();
 
-  const { data: lists } = api.lists.getListsOfBookmark.useQuery({ bookmarkId });
+  const { data: lists } = useQuery(
+    api.lists.getListsOfBookmark.queryOptions({ bookmarkId }),
+  );
   if (!lists || !allLists) {
     return null;
   }
diff --git a/apps/browser-extension/src/components/ListsSelector.tsx b/apps/browser-extension/src/components/ListsSelector.tsx
index 86c151d1..b27e866a 100644
--- a/apps/browser-extension/src/components/ListsSelector.tsx
+++ b/apps/browser-extension/src/components/ListsSelector.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
 import { useSet } from "@uidotdev/usehooks";
 import { Check, ChevronsUpDown } from "lucide-react";
 
@@ -9,7 +10,7 @@ import {
 } from "@karakeep/shared-react/hooks/lists";
 
 import { cn } from "../utils/css";
-import { api } from "../utils/trpc";
+import { useTRPC } from "../utils/trpc";
 import { Button } from "./ui/button";
 import {
   Command,
@@ -23,14 +24,17 @@ import { DynamicPopoverContent } from "./ui/dynamic-popover";
 import { Popover, PopoverTrigger } from "./ui/popover";
 
 export function ListsSelector({ bookmarkId }: { bookmarkId: string }) {
+  const api = useTRPC();
   const currentlyUpdating = useSet<string>();
   const [open, setOpen] = React.useState(false);
 
   const { mutate: addToList } = useAddBookmarkToList();
   const { mutate: removeFromList } = useRemoveBookmarkFromList();
-  const { data: existingLists } = api.lists.getListsOfBookmark.useQuery({
-    bookmarkId,
-  });
+  const { data: existingLists } = useQuery(
+    api.lists.getListsOfBookmark.queryOptions({
+      bookmarkId,
+    }),
+  );
 
   const { data: allLists } = useBookmarkLists();
 
diff --git a/apps/browser-extension/src/components/TagsSelector.tsx b/apps/browser-extension/src/components/TagsSelector.tsx
index ce404ac8..30cdcafc 100644
--- a/apps/browser-extension/src/components/TagsSelector.tsx
+++ b/apps/browser-extension/src/components/TagsSelector.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
 import { useSet } from "@uidotdev/usehooks";
 import { Check, ChevronsUpDown, Plus } from "lucide-react";
 
@@ -8,7 +9,7 @@ import {
 } from "@karakeep/shared-react/hooks/bookmarks";
 
 import { cn } from "../utils/css";
-import { api } from "../utils/trpc";
+import { useTRPC } from "../utils/trpc";
 import { Button } from "./ui/button";
 import {
   Command,
@@ -22,7 +23,8 @@ import { DynamicPopoverContent } from "./ui/dynamic-popover";
 import { Popover, PopoverTrigger } from "./ui/popover";
 
 export function TagsSelector({ bookmarkId }: { bookmarkId: string }) {
-  const { data: allTags } = api.tags.list.useQuery({});
+  const api = useTRPC();
+  const { data: allTags } = useQuery(api.tags.list.queryOptions({}));
   const { data: bookmark } = useAutoRefreshingBookmarkQuery({ bookmarkId });
 
   const existingTagIds = new Set(bookmark?.tags.map((t) => t.id) ?? []);
diff --git a/apps/browser-extension/src/utils/providers.tsx b/apps/browser-extension/src/utils/providers.tsx
index 86489d6d..4c09084d 100644
--- a/apps/browser-extension/src/utils/providers.tsx
+++ b/apps/browser-extension/src/utils/providers.tsx
@@ -1,4 +1,4 @@
-import { TRPCProvider } from "@karakeep/shared-react/providers/trpc-provider";
+import { TRPCSettingsProvider } from "@karakeep/shared-react/providers/trpc-provider";
 
 import usePluginSettings from "./settings";
 import { ThemeProvider } from "./ThemeProvider";
@@ -7,8 +7,8 @@ export function Providers({ children }: { children: React.ReactNode }) {
   const { settings } = usePluginSettings();
 
   return (
-    <TRPCProvider settings={settings}>
+    <TRPCSettingsProvider settings={settings}>
       <ThemeProvider>{children}</ThemeProvider>
-    </TRPCProvider>
+    </TRPCSettingsProvider>
   );
 }
diff --git a/apps/browser-extension/src/utils/trpc.ts b/apps/browser-extension/src/utils/trpc.ts
index b3215d9d..73fe68c5 100644
--- a/apps/browser-extension/src/utils/trpc.ts
+++ b/apps/browser-extension/src/utils/trpc.ts
@@ -1,7 +1,7 @@
 import { QueryClient } from "@tanstack/react-query";
 import { persistQueryClient } from "@tanstack/react-query-persist-client";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
-import { createTRPCReact } from "@trpc/react-query";
+import { createTRPCContext } from "@trpc/tanstack-react-query";
 import superjson from "superjson";
 
 import type { AppRouter } from "@karakeep/trpc/routers/_app";
@@ -9,7 +9,7 @@ import type { AppRouter } from "@karakeep/trpc/routers/_app";
 import { getPluginSettings } from "./settings";
 import { createChromeStorage } from "./storagePersister";
 
-export const api = createTRPCReact<AppRouter>();
+export const { TRPCProvider, useTRPC } = createTRPCContext<AppRouter>();
 
 let apiClient: ReturnType<typeof createTRPCClient<AppRouter>> | null = null;
 let queryClient: QueryClient | null = null;