fix(ui): fix GraphQL cache management

ncarlier · Jun 29, 2020 · 92fd6e6 · 92fd6e6
1 parent 1568aa7
commit 92fd6e6
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 101 deletions.
diff --git a/ui/src/categories/cache.ts b/ui/src/categories/cache.ts
@@ -7,47 +7,28 @@ export const updateCacheAfterCreate = (
   proxy: DataProxy,
   mutationResult: { data?: CreateOrUpdateCategoryResponse | null }
 ) => {
-  const previousData = proxy.readQuery<GetCategoriesResponse>({
-    query: GetCategories,
-  })
-  if (previousData && mutationResult && mutationResult.data) {
-    previousData.categories.entries.unshift(mutationResult.data.createOrUpdateCategory)
-  }
-  proxy.writeQuery({ data: previousData, query: GetCategories })
-}
-/*
-export const updateCacheAfterUpdate = (
-  proxy: DataProxy,
-  mutationResult: { data?: CreateOrUpdateCategoryResponse | null }
-) => {
-  if (!mutationResult || !mutationResult.data) {
+  if (!mutationResult.data) {
     return
   }
-  const updated = mutationResult.data.createOrUpdateCategory
+  const created = mutationResult.data.createOrUpdateCategory
+  created.unread = 0
   const previousData = proxy.readQuery<GetCategoriesResponse>({
-    query: GetCategories
+    query: GetCategories,
   })
   if (previousData) {
-    const categories = previousData.entries.map(cat => {
-      return cat.id === updated.id ? updated : cat
-    })
-    proxy.writeQuery({ data: { categories }, query: GetCategories })
+    const { categories } = previousData
+    categories.entries = [created, ...categories.entries]
+    proxy.writeQuery<GetCategoriesResponse>({ data: { categories }, query: GetCategories })
   }
-  proxy.writeQuery({
-    data: {
-      category: updated
-    },
-    query: GetCategory,
-    variables: { id: updated.id }
-  })
-}*/
+}
 
 export const updateCacheAfterDelete = (ids: number[]) => (proxy: DataProxy) => {
   const previousData = proxy.readQuery<GetCategoriesResponse>({
     query: GetCategories,
   })
   if (previousData) {
-    const categories = previousData.categories.entries.filter((category) => category.id && !ids.includes(category.id))
-    proxy.writeQuery({ data: { categories }, query: GetCategories })
+    const { categories } = previousData
+    categories.entries = categories.entries.filter((category) => category.id && !ids.includes(category.id))
+    proxy.writeQuery<GetCategoriesResponse>({ data: { categories }, query: GetCategories })
   }
 }
diff --git a/ui/src/settings/api-keys/EditApiKeyForm.tsx b/ui/src/settings/api-keys/EditApiKeyForm.tsx
@@ -9,7 +9,6 @@ import FormInputField from '../../components/FormInputField'
 import { MessageContext } from '../../context/MessageContext'
 import ErrorPanel from '../../error/ErrorPanel'
 import { getGQLError, isValidForm } from '../../helpers'
-import { updateCacheAfterUpdate } from './cache'
 import { ApiKey, CreateOrUpdateApiKeyRequest, CreateOrUpdateApiKeyResponse } from './models'
 import { CreateOrUpdateApiKey } from './queries'
 
@@ -35,7 +34,6 @@ export default ({ data, history }: Props) => {
       try {
         await editApiKeyMutation({
           variables: apiKey,
-          update: updateCacheAfterUpdate,
         })
         showMessage(`API key edited: ${apiKey.alias}`)
         history.goBack()

diff --git a/ui/src/settings/api-keys/cache.ts b/ui/src/settings/api-keys/cache.ts
@@ -1,45 +1,23 @@
 import { DataProxy } from 'apollo-cache'
 
 import { CreateOrUpdateApiKeyResponse, GetApiKeysResponse } from './models'
-import { GetApiKey, GetApiKeys } from './queries'
+import { GetApiKeys } from './queries'
 
 export const updateCacheAfterCreate = (
   proxy: DataProxy,
   mutationResult: { data?: CreateOrUpdateApiKeyResponse | null }
 ) => {
-  const previousData = proxy.readQuery<GetApiKeysResponse>({
-    query: GetApiKey,
-  })
-  if (previousData && mutationResult.data) {
-    previousData.apiKeys.unshift(mutationResult.data.createOrUpdateAPIKey)
-    proxy.writeQuery({ data: previousData, query: GetApiKeys })
-  }
-}
-
-export const updateCacheAfterUpdate = (
-  proxy: DataProxy,
-  mutationResult: { data?: CreateOrUpdateApiKeyResponse | null }
-) => {
-  if (!mutationResult || !mutationResult.data) {
+  if (!mutationResult.data) {
     return
   }
-  const updated = mutationResult.data.createOrUpdateAPIKey
+  const created = mutationResult.data.createOrUpdateAPIKey
   const previousData = proxy.readQuery<GetApiKeysResponse>({
     query: GetApiKeys,
   })
   if (previousData) {
-    const apiKeys = previousData.apiKeys.map((apiKey) => {
-      return apiKey.id === updated.id ? updated : apiKey
-    })
-    proxy.writeQuery({ data: { apiKeys }, query: GetApiKeys })
+    const apiKeys = [created, ...previousData.apiKeys]
+    proxy.writeQuery<GetApiKeysResponse>({ data: { apiKeys }, query: GetApiKeys })
   }
-  proxy.writeQuery({
-    data: {
-      apiKey: updated,
-    },
-    query: GetApiKey,
-    variables: { id: updated.id },
-  })
 }
 
 export const updateCacheAfterDelete = (ids: number[]) => (proxy: DataProxy) => {
@@ -48,6 +26,6 @@ export const updateCacheAfterDelete = (ids: number[]) => (proxy: DataProxy) => {
   })
   if (previousData) {
     const apiKeys = previousData.apiKeys.filter((apiKey) => !ids.includes(apiKey.id))
-    proxy.writeQuery({ data: { apiKeys }, query: GetApiKeys })
+    proxy.writeQuery<GetApiKeysResponse>({ data: { apiKeys }, query: GetApiKeys })
   }
 }
diff --git a/ui/src/settings/archive-services/EditArchiveServiceForm.tsx b/ui/src/settings/archive-services/EditArchiveServiceForm.tsx
@@ -12,7 +12,6 @@ import FormSelectField from '../../components/FormSelectField'
 import { MessageContext } from '../../context/MessageContext'
 import ErrorPanel from '../../error/ErrorPanel'
 import { getGQLError, isValidForm } from '../../helpers'
-import { updateCacheAfterUpdate } from './cache'
 import { ArchiveService, CreateOrUpdateArchiveServiceResponse } from './models'
 import KeeperConfigForm from './providers/KeeperConfigForm'
 import WebhookConfigForm from './providers/WebhookConfigForm'
@@ -48,7 +47,6 @@ export default ({ data, history }: Props) => {
       try {
         await editArchiveServiceMutation({
           variables: service,
-          update: updateCacheAfterUpdate,
         })
         showMessage(`Archive service edited: ${service.alias}`)
         history.goBack()

diff --git a/ui/src/settings/archive-services/cache.ts b/ui/src/settings/archive-services/cache.ts
@@ -2,58 +2,28 @@
 import { DataProxy } from 'apollo-cache'
 
 import { CreateOrUpdateArchiveServiceResponse, GetArchiveServicesResponse } from './models'
-import { GetArchiveService, GetArchiveServices } from './queries'
+import { GetArchiveServices } from './queries'
 
 export const updateCacheAfterCreate = (
   proxy: DataProxy,
   mutationResult: { data?: CreateOrUpdateArchiveServiceResponse | null }
 ) => {
-  if (!mutationResult || !mutationResult.data) {
+  if (!mutationResult.data) {
     return
   }
   const created = mutationResult.data.createOrUpdateArchiver
   const previousData = proxy.readQuery<GetArchiveServicesResponse>({
     query: GetArchiveServices,
   })
-
-  if (created.is_default && previousData) {
-    previousData.archivers = previousData.archivers.map((service) => {
-      return { ...service, is_default: false }
-    })
-  }
-  if (previousData) {
-    previousData.archivers.unshift(created)
-  }
-  proxy.writeQuery({ data: previousData, query: GetArchiveServices })
-}
-
-export const updateCacheAfterUpdate = (
-  proxy: DataProxy,
-  mutationResult: { data?: CreateOrUpdateArchiveServiceResponse | null }
-) => {
-  if (!mutationResult || !mutationResult.data) {
-    return
-  }
-  const updated = mutationResult.data.createOrUpdateArchiver
-  const previousData = proxy.readQuery<GetArchiveServicesResponse>({
-    query: GetArchiveServices,
-  })
   if (previousData) {
-    const archivers = previousData.archivers.map((service) => {
-      if (updated.is_default) {
-        service = { ...service, is_default: false }
-      }
-      return service.id === updated.id ? updated : service
-    })
-    proxy.writeQuery({ data: { archivers }, query: GetArchiveServices })
+    if (created.is_default) {
+      previousData.archivers = previousData.archivers.map((service) => {
+        return { ...service, is_default: false }
+      })
+    }
+    const archivers = [created, ...previousData.archivers]
+    proxy.writeQuery<GetArchiveServicesResponse>({ data: { archivers }, query: GetArchiveServices })
   }
-  proxy.writeQuery({
-    data: {
-      archiver: updated,
-    },
-    query: GetArchiveService,
-    variables: { id: updated.id },
-  })
 }
 
 export const updateCacheAfterDelete = (ids: number[]) => (proxy: DataProxy) => {