crud caching

client/src/components/Dialogs/Category/DeleteCategoryDialog.js

@@ -20,7 +20,7 @@ const DeleteCategoryDialog = ({ isOpenDialog, handleCloseDialog }) => {
       cache.writeQuery({
         query: GET_CATEGORIES,
         data: { categories: categories.filter(category => category.id !== deleteCategory.id) }
-      });
+      })
     }
    })
 

client/src/components/Dialogs/Todo/DeleteTodoDialog.js

@@ -5,6 +5,7 @@ import { Button, Dialog, DialogActions, DialogContent, DialogContentText, Dialog
 import { useMutation } from '@apollo/react-hooks'
 
 import GET_TODOS from '../../../apollo/queries/todos/todos'
+import GET_TODOS_BY_CATEGORY from '../../../apollo/queries/todos/todosByCategory'
 import DELETE_TODO from '../../../apollo/mutations/todos/deleteTodo'
 
 const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => {
@@ -12,11 +13,30 @@ const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) =>
 
   const [deleteTodo] = useMutation(DELETE_TODO, { 
     update(cache, { data: { deleteTodo } }) {
-      const { todos } = cache.readQuery({ query: GET_TODOS })
+
-      cache.writeQuery({
+      /* 
-        query: GET_TODOS,
+        та же самая проблема, когда у нас нету изначально весь список todos, 
-        data: { todos: todos.filter(todo => todo.id !== deleteTodo.id) }
+        мы не можем обновить кэш и получим invariant Violation !!!
-      });
+      */
+      try {
+        try {
+          const { todos } = cache.readQuery({ query: GET_TODOS })
+          cache.writeQuery({
+            query: GET_TODOS,
+            data: { todos: todos.filter(todo => todo.id !== deleteTodo.id) }
+          })
+        } catch {
+          console.log()
+        }
+        const { category } = cache.readQuery({ query: GET_TODOS_BY_CATEGORY, variables: { id: deleteTodo.category.id } })
+        cache.writeQuery({
+          query: GET_TODOS_BY_CATEGORY,
+          variables: { id: deleteTodo.category.id },
+          data: { category: { title: category.title, todos: category.todos.filter(todo => todo.id !== deleteTodo.id), __typename: 'Category' } }
+        })
+      } catch {
+        return null
+      }
     }
    })
 

client/src/components/Modals/Todo/CreateTodoModal.js

@@ -8,6 +8,7 @@ import { useMutation } from '@apollo/react-hooks'
 
 import CREATE_TODO from '../../../apollo/mutations/todos/createTodo';
 import GET_TODOS from '../../../apollo/queries/todos/todos';
+import GET_TODOS_BY_CATEGORY from '../../../apollo/queries/todos/todosByCategory'
 import GET_CATEGORIES from '../../../apollo/queries/categories/categories'
 
 const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
@@ -27,6 +28,23 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
         query: GET_TODOS,
         data: { todos: todos.concat([createTodo]) }
       });
+
+      /* 
+        здесь никак не обновить кэш когда нету загруженных изначально данных, 
+        поэтому получим invariant Violation !!!
+      */
+
+      /* запрос на обновление кэша при добавлении todo */
+      try {
+        const { category } = cache.readQuery({ query: GET_TODOS_BY_CATEGORY, variables: { id: fieldsData.category } })
+        cache.writeQuery({
+          query: GET_TODOS_BY_CATEGORY,
+          variables: { id: fieldsData.category },
+          data: { category: { title: category.title, todos: category.todos.concat([createTodo]), __typename: 'Category' } }
+        })
+      } catch {
+        return null
+      }      
     }
    })
 

client/src/db/categories.json

@@ -1,25 +0,0 @@
-[{
-  "_id": {
-    "$oid": "5ede6bbafed78043ac0339ff"
-  },
-  "title": "Category 1",
-  "description": "some description",
-  "updatedAt": "2020-04-04",
-  "createdAt": "2020-01-01"
-},{
-  "_id": {
-    "$oid": "5ede6bbafed78043ac033a00"
-  },
-  "title": "Category 2",
-  "description": "some description",
-  "updatedAt": "2020-04-04",
-  "createdAt": "2020-01-01"
-},{
-  "_id": {
-    "$oid": "5ede6bbafed78043ac033a01"
-  },
-  "title": "Category 3",
-  "description": "some description",
-  "updatedAt": "2020-04-04",
-  "createdAt": "2020-01-01"
-}]

client/src/db/todos.json

@@ -1,56 +0,0 @@
-[{
-  "_id": {
-    "$oid": "5ede6a82fed78043ac0339fa"
-  },
-  "title": "Todo 1",
-  "description": "Todo 1 description",
-  "createdAt": "2020-01-01",
-  "updatedAt": "2020-04-04",
-  "status": "open",
-  "deadline": "2020-06-12T20:18",
-  "categoryId": "5ede6bbafed78043ac0339ff"
-},{
-  "_id": {
-    "$oid": "5ede6a82fed78043ac0339fb"
-  },
-  "title": "Todo 2",
-  "description": "Todo 2 description",
-  "createdAt": "2020-01-01",
-  "updatedAt": "2020-04-04",
-  "status": "open",
-  "deadline": "2020-06-12T20:18",
-  "categoryId": "5ede6bbafed78043ac0339ff"
-},{
-  "_id": {
-    "$oid": "5ede6a82fed78043ac0339fc"
-  },
-  "title": "Todo 3",
-  "description": "Todo 3 description",
-  "createdAt": "2020-01-01",
-  "updatedAt": "2020-04-04",
-  "status": "open",
-  "deadline": "2020-06-12T20:18",
-  "categoryId": "5ede6bbafed78043ac033a00"
-},{
-  "_id": {
-    "$oid": "5ede6a82fed78043ac0339fe"
-  },
-  "title": "Todo 4",
-  "description": "Todo 4 description",
-  "createdAt": "2020-01-01",
-  "updatedAt": "2020-04-04",
-  "status": "open",
-  "deadline": "2020-06-12T20:18",
-  "categoryId": "5ede6bbafed78043ac033a01"
-},{
-  "_id": {
-    "$oid": "5ede7ef02ef0cd3c1c8660e8"
-  },
-  "title": "Todo 5",
-  "description": "Todo 5 description",
-  "createdAt": "2020-01-01",
-  "updatedAt": "2020-04-04",
-  "status": "open",
-  "deadline": "2020-06-12T20:18",
-  "categoryId": "5ede6bbafed78043ac033a00"
-}]