persist new tasks to board

Author: danielkellyio

src/graphql/mutations/addTaskToBoard.mutation.gql

@@ -0,0 +1,17 @@
+mutation addTaskToBoard($boardId: ID!, $title: String!, $type: String) {
+  boardUpdate(
+    filter: { id: $boardId }
+    data: { tasks: { create: [{ title: $title, type: $type }] } }
+  ) {
+    id
+    tasks(last: 1) {
+      items {
+        id
+        title
+        createdAt
+        updatedAt
+        dueAt
+      }
+    }
+  }
+}

src/pages/boards/[id].vue

@@ -7,7 +7,7 @@ import getBoardQuery from "@/graphql/queries/board.query.gql";
 import boardsQuery from "@/graphql/queries/boards.query.gql";
 import deleteBoardMutation from "@/graphql/mutations/deleteBoard.mutation.gql";
 import updateBoardMutation from "@/graphql/mutations/updateBoard.mutation.gql";
-import { v4 as uuidv4 } from "uuid";
+import addTaskToBoardMutation from "@/graphql/mutations/addTaskToBoard.mutation.gql";
 import { useRouter } from "vue-router";
 
 const alerts = useAlerts();
@@ -24,7 +24,13 @@ const {
   result: boardData,
   loading: loadingBoard,
   onError: onBoardError,
-} = useQuery(getBoardQuery, { id: boardId.value });
+} = useQuery(
+  getBoardQuery,
+  { id: boardId.value },
+  {
+    fetchPolicy: "cache-and-network",
+  }
+);
 onBoardError(() => alerts.error("Error loading board"));
 const board = computed(() => boardData.value?.board || null);
 const tasks = computed(() => board.value?.tasks?.items);
@@ -36,8 +42,7 @@ const { mutate: updateBoard } = useMutation(updateBoardMutation);
 const { mutate: deleteBoard, onError: onErrorDeletingBoard } = useMutation(
   deleteBoardMutation,
   {
-    update(cache, { data: { boardDelete } }) {
-      console.log(boardDelete);
+    update(cache) {
       cache.updateQuery({ query: boardsQuery }, (res) => ({
         boardsList: {
           items: res.boardsList.items.filter(
@@ -58,16 +63,38 @@ async function deleteBoardIfConfirmed() {
   }
 }
 
+// handle create task
+const {
+  mutate: addTaskToBoard,
+  onError: onErrorCreatingTask,
+  onDone: onDoneCreatingTask,
+} = useMutation(addTaskToBoardMutation);
+
+// eslint-disable-next-line
+let taskResolve = (task: Task) => {};
+// eslint-disable-next-line
+let taskReject = (message: Error) => {};
+
 function addTask(task: Task) {
   return new Promise((resolve, reject) => {
-    const taskWithId = {
+    taskResolve = resolve;
+    taskReject = reject;
+    addTaskToBoard({
+      boardId: boardId.value,
       ...task,
-      id: uuidv4(),
-    };
-    tasks.value.push(taskWithId);
-    resolve(taskWithId);
+    });
   });
 }
+
+onErrorCreatingTask((error) => {
+  console.log(error);
+  taskReject(error);
+  alerts.error("Error creating task");
+});
+onDoneCreatingTask((res) => {
+  taskResolve(res.data.boardUpdate.tasks.items[0]);
+  alerts.success("New task created!");
+});
 </script>
 <template>
   <div v-if="board">