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 --- packages/shared-react/hooks/bookmarks.ts | 250 +++++++++++++++++++------------ 1 file changed, 157 insertions(+), 93 deletions(-) (limited to 'packages/shared-react/hooks/bookmarks.ts') diff --git a/packages/shared-react/hooks/bookmarks.ts b/packages/shared-react/hooks/bookmarks.ts index aea2d185..6ff75d7e 100644 --- a/packages/shared-react/hooks/bookmarks.ts +++ b/packages/shared-react/hooks/bookmarks.ts @@ -1,132 +1,196 @@ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; + import { getBookmarkRefreshInterval } from "@karakeep/shared/utils/bookmarkUtils"; -import { api } from "../trpc"; +import { useTRPC } from "../trpc"; import { useBookmarkGridContext } from "./bookmark-grid-context"; import { useAddBookmarkToList } from "./lists"; +type TRPCApi = ReturnType; + export function useAutoRefreshingBookmarkQuery( - input: Parameters[0], + input: Parameters[0], ) { - return api.bookmarks.getBookmark.useQuery(input, { - refetchInterval: (query) => { - const data = query.state.data; - if (!data) { - return false; - } - return getBookmarkRefreshInterval(data); - }, - }); + const api = useTRPC(); + return useQuery( + api.bookmarks.getBookmark.queryOptions(input, { + refetchInterval: (query) => { + const data = query.state.data; + if (!data) { + return false; + } + return getBookmarkRefreshInterval(data); + }, + }), + ); } export function useCreateBookmark( - ...opts: Parameters + opts?: Parameters< + TRPCApi["bookmarks"]["createBookmark"]["mutationOptions"] + >[0], ) { - const apiUtils = api.useUtils(); - return api.bookmarks.createBookmark.useMutation({ - ...opts[0], - onSuccess: (res, req, meta, context) => { - apiUtils.bookmarks.getBookmarks.invalidate(); - apiUtils.bookmarks.searchBookmarks.invalidate(); - apiUtils.lists.stats.invalidate(); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + const api = useTRPC(); + const queryClient = useQueryClient(); + return useMutation( + api.bookmarks.createBookmark.mutationOptions({ + ...opts, + onSuccess: (res, req, meta, context) => { + queryClient.invalidateQueries(api.bookmarks.getBookmarks.pathFilter()); + queryClient.invalidateQueries( + api.bookmarks.searchBookmarks.pathFilter(), + ); + queryClient.invalidateQueries(api.lists.stats.pathFilter()); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } export function useCreateBookmarkWithPostHook( - ...opts: Parameters + opts?: Parameters< + TRPCApi["bookmarks"]["createBookmark"]["mutationOptions"] + >[0], ) { - const apiUtils = api.useUtils(); + const api = useTRPC(); + const queryClient = useQueryClient(); const postCreationCB = useBookmarkPostCreationHook(); - return api.bookmarks.createBookmark.useMutation({ - ...opts[0], - onSuccess: async (res, req, meta, context) => { - apiUtils.bookmarks.getBookmarks.invalidate(); - apiUtils.bookmarks.searchBookmarks.invalidate(); - await postCreationCB(res.id); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + return useMutation( + api.bookmarks.createBookmark.mutationOptions({ + ...opts, + onSuccess: async (res, req, meta, context) => { + queryClient.invalidateQueries(api.bookmarks.getBookmarks.pathFilter()); + queryClient.invalidateQueries( + api.bookmarks.searchBookmarks.pathFilter(), + ); + await postCreationCB(res.id); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } export function useDeleteBookmark( - ...opts: Parameters + opts?: Parameters< + TRPCApi["bookmarks"]["deleteBookmark"]["mutationOptions"] + >[0], ) { - const apiUtils = api.useUtils(); - return api.bookmarks.deleteBookmark.useMutation({ - ...opts[0], - onSuccess: (res, req, meta, context) => { - apiUtils.bookmarks.getBookmarks.invalidate(); - apiUtils.bookmarks.searchBookmarks.invalidate(); - apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: req.bookmarkId }); - apiUtils.lists.stats.invalidate(); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + const api = useTRPC(); + const queryClient = useQueryClient(); + return useMutation( + api.bookmarks.deleteBookmark.mutationOptions({ + ...opts, + onSuccess: (res, req, meta, context) => { + queryClient.invalidateQueries(api.bookmarks.getBookmarks.pathFilter()); + queryClient.invalidateQueries( + api.bookmarks.searchBookmarks.pathFilter(), + ); + queryClient.invalidateQueries( + api.bookmarks.getBookmark.queryFilter({ bookmarkId: req.bookmarkId }), + ); + queryClient.invalidateQueries(api.lists.stats.pathFilter()); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } export function useUpdateBookmark( - ...opts: Parameters + opts?: Parameters< + TRPCApi["bookmarks"]["updateBookmark"]["mutationOptions"] + >[0], ) { - const apiUtils = api.useUtils(); - return api.bookmarks.updateBookmark.useMutation({ - ...opts[0], - onSuccess: (res, req, meta, context) => { - apiUtils.bookmarks.getBookmarks.invalidate(); - apiUtils.bookmarks.searchBookmarks.invalidate(); - apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: req.bookmarkId }); - apiUtils.lists.stats.invalidate(); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + const api = useTRPC(); + const queryClient = useQueryClient(); + return useMutation( + api.bookmarks.updateBookmark.mutationOptions({ + ...opts, + onSuccess: (res, req, meta, context) => { + queryClient.invalidateQueries(api.bookmarks.getBookmarks.pathFilter()); + queryClient.invalidateQueries( + api.bookmarks.searchBookmarks.pathFilter(), + ); + queryClient.invalidateQueries( + api.bookmarks.getBookmark.queryFilter({ bookmarkId: req.bookmarkId }), + ); + queryClient.invalidateQueries(api.lists.stats.pathFilter()); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } export function useSummarizeBookmark( - ...opts: Parameters + opts?: Parameters< + TRPCApi["bookmarks"]["summarizeBookmark"]["mutationOptions"] + >[0], ) { - const apiUtils = api.useUtils(); - return api.bookmarks.summarizeBookmark.useMutation({ - ...opts[0], - onSuccess: (res, req, meta, context) => { - apiUtils.bookmarks.getBookmarks.invalidate(); - apiUtils.bookmarks.searchBookmarks.invalidate(); - apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: req.bookmarkId }); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + const api = useTRPC(); + const queryClient = useQueryClient(); + return useMutation( + api.bookmarks.summarizeBookmark.mutationOptions({ + ...opts, + onSuccess: (res, req, meta, context) => { + queryClient.invalidateQueries(api.bookmarks.getBookmarks.pathFilter()); + queryClient.invalidateQueries( + api.bookmarks.searchBookmarks.pathFilter(), + ); + queryClient.invalidateQueries( + api.bookmarks.getBookmark.queryFilter({ bookmarkId: req.bookmarkId }), + ); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } export function useRecrawlBookmark( - ...opts: Parameters + opts?: Parameters< + TRPCApi["bookmarks"]["recrawlBookmark"]["mutationOptions"] + >[0], ) { - const apiUtils = api.useUtils(); - return api.bookmarks.recrawlBookmark.useMutation({ - ...opts[0], - onSuccess: (res, req, meta, context) => { - apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: req.bookmarkId }); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + const api = useTRPC(); + const queryClient = useQueryClient(); + return useMutation( + api.bookmarks.recrawlBookmark.mutationOptions({ + ...opts, + onSuccess: (res, req, meta, context) => { + queryClient.invalidateQueries( + api.bookmarks.getBookmark.queryFilter({ bookmarkId: req.bookmarkId }), + ); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } export function useUpdateBookmarkTags( - ...opts: Parameters + opts?: Parameters[0], ) { - const apiUtils = api.useUtils(); - return api.bookmarks.updateTags.useMutation({ - ...opts[0], - onSuccess: (res, req, meta, context) => { - apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: req.bookmarkId }); - - [...res.attached, ...res.detached].forEach((id) => { - apiUtils.tags.get.invalidate({ tagId: id }); - apiUtils.bookmarks.getBookmarks.invalidate({ tagId: id }); - }); - apiUtils.tags.list.invalidate(); - apiUtils.lists.stats.invalidate(); - return opts[0]?.onSuccess?.(res, req, meta, context); - }, - }); + const api = useTRPC(); + const queryClient = useQueryClient(); + return useMutation( + api.bookmarks.updateTags.mutationOptions({ + ...opts, + onSuccess: (res, req, meta, context) => { + queryClient.invalidateQueries( + api.bookmarks.getBookmark.queryFilter({ bookmarkId: req.bookmarkId }), + ); + + [...res.attached, ...res.detached].forEach((id) => { + queryClient.invalidateQueries( + api.tags.get.queryFilter({ tagId: id }), + ); + queryClient.invalidateQueries( + api.bookmarks.getBookmarks.queryFilter({ tagId: id }), + ); + }); + queryClient.invalidateQueries(api.tags.list.pathFilter()); + queryClient.invalidateQueries(api.lists.stats.pathFilter()); + return opts?.onSuccess?.(res, req, meta, context); + }, + }), + ); } /** -- cgit v1.2.3-70-g09d2