entry invalidation

Author: zaknesler

ui/src/components/entry/entry-item.tsx

@@ -1,11 +1,9 @@
 import { A, type AnchorProps, useMatch } from '@solidjs/router';
-import { createQuery } from '@tanstack/solid-query';
 import { cx } from 'class-variance-authority';
 import { type Component, Show, splitProps } from 'solid-js';
-import { getEntry } from '~/api/entries';
 import { DATA_ATTRIBUTES } from '~/constants/attributes';
-import { QUERY_KEYS } from '~/constants/query';
 import { useQueryState } from '~/contexts/query-state-context';
+import { useEntry } from '~/hooks/queries/use-entry';
 import { useFeeds } from '~/hooks/queries/use-feeds';
 import type { Entry } from '~/types/bindings';
 import { formatDate } from '~/utils/date';
@@ -21,17 +19,13 @@ export const EntryItem: Component<EntryItemProps> = props => {
   const [local, rest] = splitProps(props, ['entry', 'class']);
 
   // Get the data for an entry to check if user marked it as read
-  const entryData = createQuery(() => ({
+  const entryData = useEntry(() => ({
+    entry_uuid: local.entry.uuid,
     enabled: state.params.entry_uuid === local.entry.uuid,
-    queryKey: [QUERY_KEYS.ENTRIES_VIEW, local.entry.uuid],
-    queryFn: () => getEntry(local.entry.uuid),
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
   }));
 
   const feed = () => feeds.findFeed(local.entry.feed_uuid);
   const isRead = () => !!local.entry.read_at || !!entryData.data?.read_at;
-
   const getDate = () => local.entry.published_at || local.entry.updated_at;
 
   const entryRouteMatch = useMatch(() => state.getEntryUrl(local.entry.uuid, false));

ui/src/components/entry/entry-list.tsx

@@ -23,7 +23,7 @@ export const EntryList: Component<EntryListProps> = props => {
   // Handle arrow navigation
   useListNav(() => ({
     enabled: !!props.containsActiveElement,
-    entries: entries.getAllEntries(),
+    entries: entries.allEntries(),
   }));
 
   createEffect(() => {
@@ -51,15 +51,15 @@ export const EntryList: Component<EntryListProps> = props => {
 
       <Match when={entries.query.isSuccess && feeds.data}>
         <Show
-          when={entries.getAllEntries().length}
+          when={entries.allEntries().length}
           fallback={
             <div class="size-full flex-1 p-4">
               <Empty icon={HiOutlineInbox} text="No items to display" />
             </div>
           }
         >
           <div class="flex flex-col gap-2 px-4 py-2">
-            <For each={entries.getAllEntries()}>
+            <For each={entries.allEntries()}>
               {(entry, index) => (
                 <EntryItem
                   tabIndex={index() === 0 ? 0 : -1} // Disable tabindex so we can override it with arrow keys

ui/src/components/panels/entry-panel.tsx

@@ -1,12 +1,12 @@
-import { createQuery, useQueryClient } from '@tanstack/solid-query';
+import { useQueryClient } from '@tanstack/solid-query';
 import { createMutation } from '@tanstack/solid-query';
 import { Match, Show, Switch, createEffect } from 'solid-js';
-import { getEntry } from '~/api/entries';
 import { updateEntryAsRead } from '~/api/entries';
 import { EntryView } from '~/components/entry/entry-view';
 import { Panel } from '~/components/layout/panel';
 import { QUERY_KEYS } from '~/constants/query';
 import { useQueryState } from '~/contexts/query-state-context';
+import { useEntry } from '~/hooks/queries/use-entry';
 import { useInvalidateStats } from '~/hooks/queries/use-invalidate-stats';
 import { useViewport } from '~/hooks/use-viewport';
 import { Empty } from '../ui/empty';
@@ -18,13 +18,7 @@ export const EntryPanel = () => {
   const queryClient = useQueryClient();
   const invalidateStats = useInvalidateStats();
 
-  const entry = createQuery(() => ({
-    enabled: !!state.params.entry_uuid,
-    queryKey: [QUERY_KEYS.ENTRIES_VIEW, state.params.entry_uuid],
-    queryFn: () => getEntry(state.params.entry_uuid!),
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-  }));
+  const entry = useEntry(() => ({ entry_uuid: state.params.entry_uuid }));
 
   const markAsRead = createMutation(() => ({
     mutationKey: [QUERY_KEYS.ENTRIES_VIEW_READ],

ui/src/contexts/notifications-context.ts

@@ -1,8 +1,11 @@
 import { WebSocket } from 'partysocket';
 import { createContext, createSignal, useContext } from 'solid-js';
+import { useEntry } from '~/hooks/queries/use-entry';
+import { useInvalidateEntry } from '~/hooks/queries/use-invalidate-entry';
 import type { Notification } from '~/types/bindings';
 import { wsUrl } from '~/utils/url';
 import { useInvalidateFeed } from '../hooks/queries/use-invalidate-feed';
+import { useQueryState } from './query-state-context';
 
 type NotificationsContextType = ReturnType<typeof makeNotificationsContext>;
 export const NotificationsContext = createContext<NotificationsContextType>();
@@ -15,7 +18,12 @@ export const useNotifications = () => {
 };
 
 export const makeNotificationsContext = () => {
+  const state = useQueryState();
+
+  const currentEntry = useEntry(() => ({ entry_uuid: state.params.entry_uuid }));
+
   const invalidateFeed = useInvalidateFeed();
+  const invalidateEntry = useInvalidateEntry();
 
   const [feedsRefreshing, setFeedsRefreshing] = createSignal<string[]>([]);
 
@@ -24,6 +32,13 @@ export const makeNotificationsContext = () => {
     maxRetries: 20,
   });
 
+  const maybeInvalidateCurrentEntry = (feed_uuid: string) => {
+    if (!state.params.entry_uuid || currentEntry.data?.feed_uuid !== feed_uuid) return;
+
+    // Invalidate the entry being viewed if it belongs to the same feed
+    invalidateEntry(state.params.entry_uuid);
+  };
+
   socket.addEventListener('open', () => console.info('[ws] connection established'));
   socket.addEventListener('close', () => console.info('[ws] connection terminated'));
   socket.addEventListener('error', event => console.info('[ws] error:', event.error));
@@ -34,19 +49,24 @@ export const makeNotificationsContext = () => {
     console.info('[ws] received message:', notif);
 
     switch (notif.type) {
-      case 'StartedFeedRefresh':
+      case 'StartedFeedRefresh': {
         setFeedsRefreshing(uuids => [...uuids, notif.data.feed_uuid]);
         break;
+      }
 
-      case 'FinishedFeedRefresh':
+      case 'FinishedFeedRefresh': {
         setFeedsRefreshing(uuids => uuids.filter(uuid => uuid !== notif.data.feed_uuid));
         invalidateFeed(notif.data.feed_uuid);
+        maybeInvalidateCurrentEntry(notif.data.feed_uuid);
         break;
+      }
 
       case 'FinishedScrapingEntries':
-      case 'FinishedFetchingFeedFavicon':
+      case 'FinishedFetchingFeedFavicon': {
         invalidateFeed(notif.data.feed_uuid);
+        maybeInvalidateCurrentEntry(notif.data.feed_uuid);
         break;
+      }
     }
   });
 

ui/src/hooks/queries/use-entry.ts

@@ -0,0 +1,17 @@
+import { createQuery } from '@tanstack/solid-query';
+import { getEntry } from '~/api/entries';
+import { QUERY_KEYS } from '~/constants/query';
+
+type UseEntryParams = {
+  entry_uuid?: string;
+  enabled?: boolean;
+};
+
+export const useEntry = (params: () => UseEntryParams) =>
+  createQuery(() => ({
+    enabled: (params().enabled ?? true) && !!params().entry_uuid,
+    queryKey: [QUERY_KEYS.ENTRIES_VIEW, params().entry_uuid],
+    queryFn: () => getEntry(params().entry_uuid!),
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  }));

ui/src/hooks/queries/use-infinite-entries.ts

@@ -24,7 +24,7 @@ export const useInfiniteEntries = () => {
     refetchOnMount: false,
   }));
 
-  const getAllEntries = () => query.data?.pages.flatMap(page => page.data) || [];
+  const allEntries = () => query.data?.pages.flatMap(page => page.data) || [];
 
   const fetchMore = leading(
     debounce,
@@ -39,7 +39,7 @@ export const useInfiniteEntries = () => {
 
   return {
     query,
-    getAllEntries,
     fetchMore,
+    allEntries,
   };
 };

ui/src/hooks/queries/use-invalidate-entry.ts

@@ -0,0 +1,20 @@
+import { debounce, leadingAndTrailing } from '@solid-primitives/scheduled';
+import { useQueryClient } from '@tanstack/solid-query';
+import { QUERY_KEYS } from '~/constants/query';
+
+const DEBOUNCE_MS = 500;
+
+/**
+ * Invalidate an entry by its UUID, debounced.
+ */
+export const useInvalidateEntry = () => {
+  const queryClient = useQueryClient();
+
+  return leadingAndTrailing(
+    debounce,
+    (entry_uuid: string) => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_VIEW, entry_uuid] });
+    },
+    DEBOUNCE_MS,
+  );
+};