From adb920fb8d24f7d433993b3f84a6e59270792c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=82=E6=B5=81?= <jiru@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:54:18 +0000
Subject: [PATCH 1/2] Fix UI when adding categories to articles

Closes #481.

The reason the UI was not refreshed was a regression introduced by cf550a0ca17a8b6b44f7839454b1758704e701c0.
Adding the argument "(statuses: $articleCategoryStatuses)" changes the key used by InMemoryCache
from "articleCategories" to "articleCategories({"statuses":["NORMAL"]})".
This results in cache.readFragment() (called in components/ArticleCategories/CategoryOption.js throwing this error:
```
Invariant Violation: Can't find field articleCategories on object {
  "id": ...,
  "text": ...
  ...
  "articleCategories({\"statuses\":[\"NORMAL\"]})": [
    {
      "type": "id",
      "generated": false,
      "id": "ArticleCategory:...__...",
      "typename": "ArticleCategory"
    }
  ],
  "stats": [
    ...
  ],
  "user": {
    ...
  }
}
```

This commits solves this issue by forcing the key to be "articleCategories".

The technique of using an @connection directive is documented here:
https://www.apollographql.com/docs/react/data/directives/#connection
---
 pages/article/[id].js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/article/[id].js b/pages/article/[id].js
index 3decc3c7..ccf1747c 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -173,7 +173,7 @@ const LOAD_ARTICLE = gql`
       cooccurrences {
         ...CooccurrenceSectionData
       }
-      articleCategories(statuses: $articleCategoryStatuses) {
+      articleCategories(statuses: $articleCategoryStatuses) @connection(key: "articleCategories") {
         ...ArticleCategoryData
         ...AddCategoryDialogData
       }
@@ -221,7 +221,7 @@ const LOAD_ARTICLE_FOR_USER = gql`
       articleReplies(statuses: $articleReplyStatuses) {
         ...ArticleReplyForUser
       }
-      articleCategories(statuses: $articleCategoryStatuses) {
+      articleCategories(statuses: $articleCategoryStatuses) @connection(key: "articleCategories") {
         ...ArticleCategoryDataForUser
         ...AddCategoryDialogData
       }

From 478d1578912bc3e2bec3baaa4e2915e992ca72e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=82=E6=B5=81?= <jiru@users.noreply.github.com>
Date: Tue, 23 Jul 2024 15:34:20 +0000
Subject: [PATCH 2/2] Fix lint

---
 pages/article/[id].js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/article/[id].js b/pages/article/[id].js
index ccf1747c..5821aa31 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -173,7 +173,8 @@ const LOAD_ARTICLE = gql`
       cooccurrences {
         ...CooccurrenceSectionData
       }
-      articleCategories(statuses: $articleCategoryStatuses) @connection(key: "articleCategories") {
+      articleCategories(statuses: $articleCategoryStatuses)
+        @connection(key: "articleCategories") {
         ...ArticleCategoryData
         ...AddCategoryDialogData
       }
@@ -221,7 +222,8 @@ const LOAD_ARTICLE_FOR_USER = gql`
       articleReplies(statuses: $articleReplyStatuses) {
         ...ArticleReplyForUser
       }
-      articleCategories(statuses: $articleCategoryStatuses) @connection(key: "articleCategories") {
+      articleCategories(statuses: $articleCategoryStatuses)
+        @connection(key: "articleCategories") {
         ...ArticleCategoryDataForUser
         ...AddCategoryDialogData
       }