codepod-io · lihebi · Nov 4, 2022 · Nov 4, 2022
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
@@ -37,6 +37,7 @@ import { useStore } from "zustand";
 import { RepoContext } from "../lib/store";
 
 import { MyMonaco } from "./MyMonaco";
+import { useApolloClient } from "@apollo/client";
 
 const nanoid = customAlphabet(nolookalikes, 10);
 
@@ -437,6 +438,7 @@ export function Canvas() {
   const reactFlowWrapper = useRef<any>(null);
 
   const addPod = useStore(store, (state) => state.addPod);
+  const apolloClient = useApolloClient();
   const setPodPosition = useStore(store, (state) => state.setPodPosition);
   const setPodParent = useStore(store, (state) => state.setPodParent);
   const deletePod = useStore(store, (state) => state.deletePod);
@@ -481,7 +483,7 @@ export function Canvas() {
       setNodes((nds) => nds.concat(newNode));
 
       // add to pods
-      addPod({
+      addPod(apolloClient, {
         id,
         parent: "ROOT",
         index: 0,
@@ -654,7 +656,7 @@ export function Canvas() {
     (nodes) => {
       // remove from pods
       for (const node of nodes) {
-        deletePod({ id: node.id, toDelete: [] });
+        deletePod(apolloClient, { id: node.id, toDelete: [] });
       }
     },
     [deletePod]

diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
@@ -160,6 +160,7 @@ function ApplyAll() {
   const numDirty = useStore(store, selectNumDirty());
   const clearAllResults = useStore(store, (s) => s.clearAllResults);
   const remoteUpdateAllPods = useStore(store, (s) => s.remoteUpdateAllPods);
+  const client = useApolloClient();
   usePrompt(
     `You have unsaved ${numDirty} changes. Are you sure you want to leave?`,
     numDirty > 0
@@ -173,7 +174,7 @@ function ApplyAll() {
     let id = setInterval(() => {
       // websocket resets after 60s of idle by most firewalls
       console.log("periodically saving ..");
-      remoteUpdateAllPods();
+      remoteUpdateAllPods(client);
     }, 1000);
     return () => {
       console.log("removing interval");
@@ -188,7 +189,7 @@ function ApplyAll() {
         size="small"
         disabled={numDirty === 0}
         onClick={() => {
-          remoteUpdateAllPods();
+          remoteUpdateAllPods(client);
         }}
       >
         <CloudUploadIcon />

diff --git a/ui/src/lib/fetch.tsx b/ui/src/lib/fetch.tsx
@@ -1,11 +1,17 @@
-import { getAuthHeaders, hashPod, computeNamespace } from "./utils";
-import { Pod } from "./store";
+import { gql } from "@apollo/client";
 
-const graphql_url = "/graphql";
+import { hashPod, computeNamespace } from "./utils";
+import { Pod } from "./store";
 
-export async function doRemoteLoadRepo({ id }) {
+/**
+ * Load remote repo
+ * @param id repo id
+ * @param client apollo client
+ * @returns a list of pods
+ */
+export async function doRemoteLoadRepo({ id, client }) {
   // load from remote
-  const query = `
+  let query = gql`
     query Repo($id: String!) {
       repo(id: $id) {
         id
@@ -34,29 +40,26 @@ export async function doRemoteLoadRepo({ id }) {
           y
           width
           height
-          parent {id}
-          children {id}
+          parent {
+            id
+          }
+          children {
+            id
+          }
         }
       }
     }
   `;
-  // return res
-  let res = await fetch(graphql_url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      ...getAuthHeaders(),
+  let res = await client.query({
+    query,
+    variables: {
+      id,
     },
-    body: JSON.stringify({
-      query: query,
-      variables: {
-        id,
-      },
-    }),
+    // CAUTION I must set this because refetechQueries does not work.
+    fetchPolicy: "no-cache",
   });
-  res = await res.json();
-  return res;
+  // We need to do a deep copy here, because apollo client returned immutable objects.
+  return res.data.repo.pods.map((pod) => ({ ...pod }));
 }
 
 export function normalize(pods) {
@@ -207,142 +210,59 @@ function serializePodInput(pod) {
   }))(pod);
 }
 
-export async function doRemoteAddPod({ repoId, parent, index, pod }) {
-  const query = `
+export async function doRemoteAddPod(client, { repoId, parent, index, pod }) {
+  const mutation = gql`
     mutation addPod(
       $repoId: String
       $parent: String
       $index: Int
       $input: PodInput
     ) {
-      addPod(
-        repoId: $repoId
-        parent: $parent
-        index: $index
-        input: $input
-      )
+      addPod(repoId: $repoId, parent: $parent, index: $index, input: $input)
     }
   `;
-  let res = await fetch(graphql_url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      ...getAuthHeaders(),
+  // FIXME refetch
+  await client.mutate({
+    mutation,
+    variables: {
+      repoId,
+      parent,
+      index,
+      input: serializePodInput(pod),
     },
-    body: JSON.stringify({
-      query: query,
-      variables: {
-        repoId,
-        parent,
-        index,
-        input: serializePodInput(pod),
-      },
-    }),
+    // FIXME the query is not refetched.
+    refetchQueries: ["Repo"],
   });
-  res = await res.json();
-  return res;
+  return true;
 }
 
-export async function doRemoteDeletePod({ id, toDelete }) {
-  const query = `
+export async function doRemoteDeletePod(client, { id, toDelete }) {
+  const mutation = gql`
     mutation deletePod($id: String, $toDelete: [String]) {
       deletePod(id: $id, toDelete: $toDelete)
     }
   `;
-  let res = await fetch(graphql_url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      ...getAuthHeaders(),
+  await client.mutate({
+    mutation,
+    variables: {
+      id,
+      toDelete,
     },
-    body: JSON.stringify({
-      query: query,
-      variables: {
-        id,
-        toDelete,
-      },
-    }),
   });
-  res = await res.json();
-  return res;
+  return true;
 }
 
-export async function doRemoteUpdatePod({ pod }) {
-  const res = await fetch(graphql_url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      ...getAuthHeaders(),
-    },
-    body: JSON.stringify({
-      query: `
-        mutation updatePod($id: String, $input: PodInput) {
-          updatePod(id: $id, input: $input)
-        }
-      `,
-      variables: {
-        id: pod.id,
-        input: serializePodInput(pod),
-      },
-    }),
-  });
-  const result = await res.json();
-  if (result["errors"]) {
-    console.log();
-    throw new Error(
-      result["errors"][0].message +
-        "\n" +
-        result["errors"][0].extensions.exception.stacktrace.join("\n")
-    );
-  }
-  return result;
-}
-
-export async function doRemotePastePod({
-  clip,
-  repoId, // FIXME repoId is not used.
-  parent,
-  index,
-  column,
-}) {
-  let res = await fetch(graphql_url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      ...getAuthHeaders(),
+export async function doRemoteUpdatePod(client, { pod }) {
+  await client.mutate({
+    mutation: gql`
+      mutation updatePod($id: String, $input: PodInput) {
+        updatePod(id: $id, input: $input)
+      }
+    `,
+    variables: {
+      id: pod.id,
+      input: serializePodInput(pod),
     },
-    body: JSON.stringify({
-      // movePod(id: String, parentId: String, index: Int): Boolean
-      query: `
-        mutation PastePods(
-          $repoId: String
-          $ids: [String]
-          $parentId: String
-          $index: Int
-          $column: Int
-        ) {
-          pastePods(
-            repoId: $repoId
-            ids: $ids
-            parentId: $parentId
-            index: $index
-            column: $column
-          )
-        }
-      `,
-      variables: {
-        ids: clip,
-        parentId: parent,
-        index,
-        column,
-        repoId,
-      },
-    }),
   });
-  res = await res.json();
-  return res;
+  return true;
 }