crud caching

This commit is contained in:
Sergey Yarkov 2020-06-15 19:52:49 +03:00
parent e16234d0b7
commit ade8afcb65
5 changed files with 44 additions and 87 deletions

View File

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

View File

@ -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,
data: { todos: todos.filter(todo => todo.id !== deleteTodo.id) }
});
/*
та же самая проблема, когда у нас нету изначально весь список todos,
мы не можем обновить кэш и получим 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
}
}
})

View File

@ -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
}
}
})

View File

@ -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"
}]

View File

@ -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"
}]