From 65f6e83f11c82b0ec762e11f3392a80e614ee69a Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 1 Feb 2026 12:29:54 +0000 Subject: 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 --- apps/mobile/app/dashboard/(tabs)/highlights.tsx | 22 +++++++++++++--------- apps/mobile/app/dashboard/(tabs)/lists.tsx | 12 +++++++----- apps/mobile/app/dashboard/(tabs)/settings.tsx | 6 ++++-- apps/mobile/app/dashboard/(tabs)/tags.tsx | 8 +++++--- 4 files changed, 29 insertions(+), 19 deletions(-) (limited to 'apps/mobile/app/dashboard/(tabs)') diff --git a/apps/mobile/app/dashboard/(tabs)/highlights.tsx b/apps/mobile/app/dashboard/(tabs)/highlights.tsx index 7879081b..8a0a8ae3 100644 --- a/apps/mobile/app/dashboard/(tabs)/highlights.tsx +++ b/apps/mobile/app/dashboard/(tabs)/highlights.tsx @@ -4,11 +4,13 @@ import HighlightList from "@/components/highlights/HighlightList"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import FullPageSpinner from "@/components/ui/FullPageSpinner"; import PageTitle from "@/components/ui/PageTitle"; +import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query"; -import { api } from "@karakeep/shared-react/trpc"; +import { useTRPC } from "@karakeep/shared-react/trpc"; export default function Highlights() { - const apiUtils = api.useUtils(); + const api = useTRPC(); + const queryClient = useQueryClient(); const { data, isPending, @@ -17,12 +19,14 @@ export default function Highlights() { fetchNextPage, isFetchingNextPage, refetch, - } = api.highlights.getAll.useInfiniteQuery( - {}, - { - initialCursor: null, - getNextPageParam: (lastPage) => lastPage.nextCursor, - }, + } = useInfiniteQuery( + api.highlights.getAll.infiniteQueryOptions( + {}, + { + initialCursor: null, + getNextPageParam: (lastPage) => lastPage.nextCursor, + }, + ), ); if (error) { @@ -34,7 +38,7 @@ export default function Highlights() { } const onRefresh = () => { - apiUtils.highlights.getAll.invalidate(); + queryClient.invalidateQueries(api.highlights.getAll.pathFilter()); }; return ( diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx index 45c23a28..5719c67c 100644 --- a/apps/mobile/app/dashboard/(tabs)/lists.tsx +++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx @@ -8,9 +8,10 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import FullPageSpinner from "@/components/ui/FullPageSpinner"; import PageTitle from "@/components/ui/PageTitle"; import { Text } from "@/components/ui/Text"; -import { api } from "@/lib/trpc"; +import { useTRPC } from "@/lib/trpc"; import { useColorScheme } from "@/lib/useColorScheme"; import { condProps } from "@/lib/utils"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; import { Plus } from "lucide-react-native"; import { useBookmarkLists } from "@karakeep/shared-react/hooks/lists"; @@ -84,8 +85,9 @@ export default function Lists() { const [showChildrenOf, setShowChildrenOf] = useState>( {}, ); - const apiUtils = api.useUtils(); - const { data: listStats } = api.lists.stats.useQuery(); + const api = useTRPC(); + const queryClient = useQueryClient(); + const { data: listStats } = useQuery(api.lists.stats.queryOptions()); // Check if there are any shared lists const hasSharedLists = useMemo(() => { @@ -116,8 +118,8 @@ export default function Lists() { } const onRefresh = () => { - apiUtils.lists.list.invalidate(); - apiUtils.lists.stats.invalidate(); + queryClient.invalidateQueries(api.lists.list.pathFilter()); + queryClient.invalidateQueries(api.lists.stats.pathFilter()); }; const links: ListLink[] = [ diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx index 106baec5..2610aa37 100644 --- a/apps/mobile/app/dashboard/(tabs)/settings.tsx +++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx @@ -13,7 +13,8 @@ import { Text } from "@/components/ui/Text"; import { useServerVersion } from "@/lib/hooks"; import { useSession } from "@/lib/session"; import useAppSettings from "@/lib/settings"; -import { api } from "@/lib/trpc"; +import { useTRPC } from "@/lib/trpc"; +import { useQuery } from "@tanstack/react-query"; export default function Dashboard() { const { logout } = useSession(); @@ -22,6 +23,7 @@ export default function Dashboard() { setSettings, isLoading: isSettingsLoading, } = useAppSettings(); + const api = useTRPC(); const imageQuality = useSharedValue(0); const imageQualityMin = useSharedValue(0); @@ -31,7 +33,7 @@ export default function Dashboard() { imageQuality.value = settings.imageQuality * 100; }, [settings]); - const { data, error } = api.users.whoami.useQuery(); + const { data, error } = useQuery(api.users.whoami.queryOptions()); const { data: serverVersion, isLoading: isServerVersionLoading, diff --git a/apps/mobile/app/dashboard/(tabs)/tags.tsx b/apps/mobile/app/dashboard/(tabs)/tags.tsx index c0ac2d49..470ff3f3 100644 --- a/apps/mobile/app/dashboard/(tabs)/tags.tsx +++ b/apps/mobile/app/dashboard/(tabs)/tags.tsx @@ -8,7 +8,8 @@ import FullPageSpinner from "@/components/ui/FullPageSpinner"; import PageTitle from "@/components/ui/PageTitle"; import { SearchInput } from "@/components/ui/SearchInput"; import { Text } from "@/components/ui/Text"; -import { api } from "@/lib/trpc"; +import { useTRPC } from "@/lib/trpc"; +import { useQueryClient } from "@tanstack/react-query"; import { usePaginatedSearchTags } from "@karakeep/shared-react/hooks/tags"; import { useDebounce } from "@karakeep/shared-react/hooks/use-debounce"; @@ -23,7 +24,8 @@ interface TagItem { export default function Tags() { const [refreshing, setRefreshing] = useState(false); const [searchQuery, setSearchQuery] = useState(""); - const apiUtils = api.useUtils(); + const api = useTRPC(); + const queryClient = useQueryClient(); // Debounce search query to avoid too many API calls const debouncedSearch = useDebounce(searchQuery, 300); @@ -56,7 +58,7 @@ export default function Tags() { } const onRefresh = () => { - apiUtils.tags.list.invalidate(); + queryClient.invalidateQueries(api.tags.list.pathFilter()); }; const tags: TagItem[] = data.tags.map((tag) => ({ -- cgit v1.2.3-70-g09d2