fix(highlight): stale cache & centralize CRUD GraphQL queries

Author: viktor-yunenko

client/src/apps/highlighter/PostContentHighlighted.tsx

@@ -4,11 +4,10 @@ import { useRef } from "react";
 import { FaTrashCan } from "react-icons/fa6";
 
 import { highlighter, isHTMLElement } from "@/apps/highlighter/highlighter";
+import { removeHighlight } from "@/apps/highlighter/useHighlighter";
 import { Prose } from "@/components/ui/prose";
 import { ids } from "@/e2e/ids";
 import type { ID } from "@/gql-tada";
-import { graphql } from "@/gql-tada";
-import { mutateAndRefetchMountedQueries } from "@/graphql/mutateAndRefetchMountedQueries";
 import { markedConfigured } from "@/utils/marked-configured";
 import { useIsLoading } from "@/utils/useIsLoading";
 import { useValtioProxyRef } from "@/utils/useValtioProxyRef";
@@ -60,13 +59,7 @@ export function PostContentHighlighted(props: {
       return;
     }
     await loading.track(async () => {
-      await mutateAndRefetchMountedQueries(
-        graphql(`
-          mutation HighlighterDelete($id: ID!) { post_highlight_delete(data: { id: $id }) }
-        `),
-        // @ts-expect-error #bad-infer
-        { id: state.snap.activeHighlightId },
-      );
+      await removeHighlight(state.snap.activeHighlightId!);
     });
     state.mutable.activeHighlightId = null;
   }

client/src/apps/highlighter/highlighter.tsx

@@ -1,8 +1,8 @@
 import { ActionBar, Button, Kbd } from "@chakra-ui/react";
 import { useEffect, useRef } from "react";
+import { saveHighlight } from "@/apps/highlighter/useHighlighter";
 import { ids } from "@/e2e/ids";
-import { graphql, type ID } from "@/gql-tada";
-import { mutateAndRefetchMountedQueries } from "@/graphql/mutateAndRefetchMountedQueries";
+import type { ID } from "@/gql-tada";
 import { toast } from "@/utils/toast";
 import { useIsLoading } from "@/utils/useIsLoading";
 import { useValtioProxyRef } from "@/utils/useValtioProxyRef";
@@ -240,39 +240,6 @@ export namespace highlighter {
     return textContext;
   }
 
-  async function saveHighlight(args: {
-    id: ID;
-    text: string;
-    text_prefix: string;
-    text_postfix: string;
-  }) {
-    console.log(attrs.flag, args);
-
-    await mutateAndRefetchMountedQueries(
-      graphql(`
-        mutation HighlighterCreate(
-          $id: ID!,
-          $text: String!,
-          $text_prefix: String,
-          $text_postfix: String,
-        ) {
-          post_highlight_create(data: {
-            post: { set: $id }
-            text: $text
-            text_postfix: $text_postfix
-            text_prefix: $text_prefix
-          })
-        }
-      `),
-      {
-        id: args.id,
-        text: args.text,
-        text_prefix: args.text_prefix,
-        text_postfix: args.text_postfix,
-      },
-    );
-  }
-
   export type ModelType = "comment" | "post" | "review";
 
   export const attrs = {

client/src/apps/highlighter/useHighlighter.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from "@apollo/client/react";
 import type { ResultOf } from "gql.tada";
 import { highlighter } from "@/apps/highlighter/highlighter";
 import type { PostCommentTree } from "@/components/posts/PostDetail";
@@ -41,15 +42,15 @@ export function useHighlighter(props: UseHighlighterProps) {
     },
   });
 
+  const { data } = useQuery(PostHighlightsQuery, {
+    variables: { ids: state.snap.postIds },
+    skip: !state.snap.postIds.length,
+  });
+
   useInit({
-    isReady: state.snap.postIds.length,
-    deps: [state.snap.postIds],
+    isReady: Boolean(data),
+    deps: [data],
     onInit: async () => {
-      const res = await client.query({
-        query: PostHighlightsQuery,
-        variables: { ids: state.snap.postIds },
-      });
-      const data = res.data!;
       if (isQueryDataComplete(data) && data.post_highlights) {
         const highlights: Record<ID, PostHighlight[]> = {};
         for (const highlight of data.post_highlights) {
@@ -109,10 +110,54 @@ export function useHighlighter(props: UseHighlighterProps) {
   }
 
   return {
-    highlight: highlight,
+    highlight,
   };
 }
 
+export async function saveHighlight(args: {
+  id: ID;
+  text: string;
+  text_prefix: string;
+  text_postfix: string;
+}) {
+  await client.mutate({
+    mutation: graphql(`
+      mutation HighlighterCreate(
+        $id: ID!,
+        $text: String!,
+        $text_prefix: String,
+        $text_postfix: String,
+      ) {
+        post_highlight_create(data: {
+          post: { set: $id }
+          text: $text
+          text_postfix: $text_postfix
+          text_prefix: $text_prefix
+        })
+      }
+    `),
+    variables: {
+      id: args.id,
+      text: args.text,
+      text_prefix: args.text_prefix,
+      text_postfix: args.text_postfix,
+    },
+  });
+  await client.refetchQueries({ include: [PostHighlightsQuery] });
+}
+
+export async function removeHighlight(id: ID) {
+  await client.mutate({
+    mutation: graphql(`
+      mutation HighlighterDelete($id: ID!) {
+        post_highlight_delete(data: { id: $id })
+      }
+    `),
+    variables: { id },
+  });
+  await client.refetchQueries({ include: [PostHighlightsQuery] });
+}
+
 const PostHighlightsQuery = graphql(
   `query GetPostHighlights($ids: [ID!]!) {
     post_highlights(post_ids: $ids) {