2025 11 data fetching refactor

package.json

@@ -26,6 +26,9 @@
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@next/mdx": "16.0.1",
+    "@orpc/client": "^1.11.3",
+    "@orpc/server": "^1.11.3",
+    "@orpc/tanstack-query": "^1.11.3",
     "@paralleldrive/cuid2": "^3.0.4",
     "@planetscale/database": "^1.19.0",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -53,10 +56,10 @@
     "@tanstack/react-query": "^5.90.7",
     "@tanstack/react-query-persist-client": "^5.90.9",
     "@tanstack/react-table": "^8.21.3",
-    "@trpc/client": "11.7.1",
+    "@trpc/client": "^11.7.1",
     "@trpc/next": "11.7.1",
-    "@trpc/server": "11.7.1",
-    "@trpc/tanstack-react-query": "11.7.1",
+    "@trpc/server": "^11.7.1",
+    "@trpc/tanstack-react-query": "^11.7.1",
     "@types/mdx": "^2.0.13",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "better-auth": "^1.3.34",

public/manifest.json → public/app.webmanifest

@@ -1,12 +1,13 @@
 {
+  "id": "serial",
   "name": "Serial",
   "short_name": "Serial",
   "theme_color": "#fafaf9",
   "background_color": "#0c0a09",
   "display": "standalone",
   "orientation": "any",
   "scope": "/",
-  "start_url": "/",
+  "start_url": "/feed",
   "icons": [
     {
       "src": "/icon-192.png",

src/app/(feed)/feed/RefetchItemsButton.tsx

@@ -1,52 +1,41 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import clsx from "clsx";
 import { RefreshCwIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { ButtonWithShortcut } from "~/components/ButtonWithShortcut";
-import { Button } from "~/components/ui/button";
-import { FETCH_NEW_FEED_ITEMS_KEY } from "~/lib/data/feed-items";
-import { useFetchNewFeedItemsMutation } from "~/lib/data/feed-items/mutations";
+import { useFeedItemsQuery } from "~/lib/data/feed-items";
 import { useShortcut } from "~/lib/hooks/useShortcut";
 
-const ONE_HOUR = 1000 * 60 * 60;
-
 export function RefetchItemsButton() {
   const pathname = usePathname();
 
-  const { mutateAsync: fetchNewFeedItems, isPending } =
-    useFetchNewFeedItemsMutation();
-
-  useQuery({
-    queryKey: [FETCH_NEW_FEED_ITEMS_KEY],
-    queryFn: async () => {
-      await fetchNewFeedItems();
-      return true;
-    },
-    staleTime: ONE_HOUR,
-  });
+  const queryClient = useQueryClient();
+  const { fetchStatus } = useFeedItemsQuery();
 
   useShortcut("r", () => {
-    void fetchNewFeedItems();
+    queryClient.invalidateQueries();
   });
 
   if (pathname !== "/feed") return null;
 
+  const isLoading = fetchStatus === "fetching";
+
   return (
     <ButtonWithShortcut
       size="icon md:default"
       variant="outline"
-      onClick={async () => {
-        await fetchNewFeedItems();
+      onClick={() => {
+        queryClient.invalidateQueries();
       }}
-      disabled={isPending}
+      disabled={isLoading}
       shortcut="r"
     >
       <RefreshCwIcon
         size={16}
         className={clsx({
-          "animate-spin": isPending,
+          "animate-spin": isLoading,
         })}
       />
       <span className="hidden pl-1.5 md:block">Refresh</span>