docs: Do not modify the object returned from readQuery directly (#1193)

Author: x-ji

packages/docs/src/fr/guide/apollo/mutations.md

@@ -35,11 +35,12 @@ methods: {
       // puis avec le résultat de la mutation
       update: (store, { data: { addTag } }) => {
         // Lecture de la donnée depuis le cache pour cette requête
-        const data = store.readQuery({ query: TAGS_QUERY })
+        const { tags } = store.readQuery({ query: TAGS_QUERY })
         // Ajout du libellé de la mutation en fin de tableau
-        data.tags.push(addTag)
+        const tagsCopy = tags.slice()
+        tagsCopy.push(addTag)
         // Réécriture en cache
-        store.writeQuery({ query: TAGS_QUERY, data })
+        store.writeQuery({ query: TAGS_QUERY, { tags: tagsCopy }})
       },
       // Interface utilisateur optimiste
       // Utilisé comme "fausse" donnée dès qu'une requête est réalisée afin que

packages/docs/src/guide/apollo/mutations.md

@@ -35,11 +35,14 @@ methods: {
       // and then with the real result of the mutation
       update: (store, { data: { addTag } }) => {
         // Read the data from our cache for this query.
-        const data = store.readQuery({ query: TAGS_QUERY })
+        const { tags } = store.readQuery({ query: TAGS_QUERY })
         // Add our tag from the mutation to the end
-        data.tags.push(addTag)
+        // We don't want to modify the object returned by readQuery directly:
+        // https://www.apollographql.com/docs/react/caching/cache-interaction/
+        const tagsCopy = tags.slice()
+        tagsCopy.push(addTag)
         // Write our data back to the cache.
-        store.writeQuery({ query: TAGS_QUERY, data })
+        store.writeQuery({ query: TAGS_QUERY, { tags: tagsCopy }})
       },
       // Optimistic UI
       // Will be treated as a 'fake' result as soon as the request is made

packages/docs/src/zh-cn/guide/apollo/mutations.md

@@ -34,11 +34,12 @@ methods: {
       // 查询将先通过乐观响应、然后再通过真正的变更结果更新
       update: (store, { data: { addTag } }) => {
         // 从缓存中读取这个查询的数据
-        const data = store.readQuery({ query: TAGS_QUERY })
+        const { tags } = store.readQuery({ query: TAGS_QUERY })
         // 将变更中的标签添加到最后
-        data.tags.push(addTag)
+        const tagsCopy = tags.slice()
+        tagsCopy.push(addTag)
         // 将数据写回缓存
-        store.writeQuery({ query: TAGS_QUERY, data })
+        store.writeQuery({ query: TAGS_QUERY, { tags: tagsCopy }})
       },
       // 乐观 UI
       // 将在请求产生时作为“假”结果，使用户界面能够快速更新
@@ -118,4 +119,4 @@ export const resolvers = {
     },
   },
 }
-```
+```