Надо их всех кэшировать. Кэширование данных

Как мы кэшировали комментарии и ответы на CodeDash?

Сегодня я хотел пролить свет на то, как, по моему мнению, лучше всего отображать комментарии или ответы в приложении. Но перед этим позвольте мне рассказать, как мы реализовали и реструктурировали способ отображения комментариев и ответов на CodeDash.

В нашей первой реализации комментарии и ответы находились на одной странице публикации. Под каждым сообщением мы отображали комментарии и ответы для этого конкретного сообщения. Мы использовали подписки на GraphQL, чтобы мгновенно обновлять пользовательский интерфейс, как только кто-то добавляет или удаляет комментарий. Некоторое время это работало и работало в режиме реального времени, поэтому после внедрения мы были в восторге.

Но затем мы начали сталкиваться с беспрецедентными ошибками в подписках на GraphQL. Наши пользователи сообщали об ошибках, которые мешали работе нашей комнаты. После этого пришлось отключить подписку на комментарии и ответы. Логика была проста. Код предыдущей логики был таким:

subscribeToMore({
  document: COMMENTS_SUBSCRIPTION,
  variables: { repoName: params.repoName },
  updateQuery: (prev, { subscriptionData }) => {
    if (!subscriptionData.data) return prev;
    const newFeedItem = subscriptionData.data.commentAdded;
    return Object.assign({}, prev, {
      entry: {
        comments: [newFeedItem, ...prev.entry.comments]
      }
  });
}})

Мы прекратили обновление комментариев и ответов в режиме реального времени. Вместо этого, если текущий пользователь прокомментировал или удалил комментарий, мы просто обновили наш клиентский кэш Apollo. Позже мы перешли на Redux и соответствующим образом обновили наш магазин, добавив и удалив комментарий или ответ текущего пользователя.

Но чтобы еще больше оптимизировать весь механизм, мы кэшировали наши комментарии и ответы. Это означает, что как только наши комментарии и ответы были получены, мы больше не делали никаких дополнительных вызовов API для существующих комментариев и ответов. Структура данных для наших кэшированных комментариев в нашем магазине была такой:

{
  "hzaaohrxsw60": [
    {
      "id": "93693b40-3062-4256-82f8-ab824af22b97",
      "comment": "Comment",
      "replyCount": 0,
      "createdAt": "1655964221258",
      "isLiked": null,
      "likeCount": 0,
      "totalComments": 2
    },
    {
      "id": "391472ae-63e6-4284-b0b2-0020c744e882",
      "comment": "Qwerty",
      "replyCount": 2,
      "createdAt": "1655964562863",
      "isLiked": null,
      "likeCount": 0,
      "totalComments": 2
    }
  ]
}

Мы сопоставили идентификаторы postId с ключом, а значением был массив комментариев, соответствующий этому идентификатору postId. Аналогично, для ответов структура данных была аналогичной, но вместо postIds мы сохранили сопоставление с commentIds.

Некоторое время это работало очень хорошо. Оно было оптимизировано. Но мы собираемся отойти и от этой логики. В следующем посте я расскажу, насколько важен порядок комментариев и ответов. А пока желаю вам хорошей недели

Источник