Deploy on push / deploy (push) Successful in 6s

Details

[0.4.16] - 2025-03-22

- Added hierarchical comments pagination:
  - Created new GraphQL query `load_comments_branch` for efficient loading of hierarchical comments
  - Ability to load root comments with their first N replies
  - Added pagination for both root and child comments
  - Using existing `commented` field in `Stat` type to display number of replies
  - Added special `first_replies` field to store first replies to a comment
  - Optimized SQL queries for efficient loading of comment hierarchies
  - Implemented flexible comment sorting system (by time, rating)

2025-03-22 13:37:43 +03:00

6.1 KiB

Raw Blame History

Пагинация комментариев

Обзор

Реализована система пагинации комментариев по веткам, которая позволяет эффективно загружать и отображать вложенные ветки обсуждений. Основные преимущества:

Загрузка только необходимых комментариев, а не всего дерева
Снижение нагрузки на сервер и клиент
Возможность эффективной навигации по большим обсуждениям
Предзагрузка первых N ответов для улучшения UX

API для иерархической загрузки комментариев

GraphQL запрос `load_comments_branch`

query LoadCommentsBranch(
  $shout: Int!,
  $parentId: Int,
  $limit: Int,
  $offset: Int,
  $sort: ReactionSort,
  $childrenLimit: Int,
  $childrenOffset: Int
) {
  load_comments_branch(
    shout: $shout,
    parent_id: $parentId,
    limit: $limit,
    offset: $offset,
    sort: $sort,
    children_limit: $childrenLimit,
    children_offset: $childrenOffset
  ) {
    id
    body
    created_at
    created_by {
      id
      name
      slug
      pic
    }
    kind
    reply_to
    stat {
      rating
      commented
    }
    first_replies {
      id
      body
      created_at
      created_by {
        id
        name
        slug
        pic
      }
      kind
      reply_to
      stat {
        rating
        commented
      }
    }
  }
}

Параметры запроса

Параметр	Тип	По умолчанию	Описание
shout	Int!	-	ID статьи, к которой относятся комментарии
parent_id	Int	null	ID родительского комментария. Если null, загружаются корневые комментарии
limit	Int	10	Максимальное количество комментариев для загрузки
offset	Int	0	Смещение для пагинации
sort	ReactionSort	newest	Порядок сортировки: newest, oldest, like
children_limit	Int	3	Максимальное количество дочерних комментариев для каждого родительского
children_offset	Int	0	Смещение для пагинации дочерних комментариев

Поля в ответе

Каждый комментарий содержит следующие основные поля:

id: ID комментария
body: Текст комментария
created_at: Время создания
created_by: Информация об авторе
kind: Тип реакции (COMMENT)
reply_to: ID родительского комментария (null для корневых)
first_replies: Первые N дочерних комментариев
stat: Статистика комментария, включающая:
- commented: Количество ответов на комментарий
- rating: Рейтинг комментария

Примеры использования

Загрузка корневых комментариев с первыми ответами

const { data } = await client.query({
  query: LOAD_COMMENTS_BRANCH,
  variables: {
    shout: 222,
    limit: 10,
    offset: 0,
    sort: "newest",
    childrenLimit: 3
  }
});

Загрузка ответов на конкретный комментарий

const { data } = await client.query({
  query: LOAD_COMMENTS_BRANCH,
  variables: {
    shout: 222,
    parentId: 123, // ID комментария, для которого загружаем ответы
    limit: 10,
    offset: 0,
    sort: "oldest" // Сортируем ответы от старых к новым
  }
});

Пагинация дочерних комментариев

Для загрузки дополнительных ответов на комментарий:

const { data } = await client.query({
  query: LOAD_COMMENTS_BRANCH,
  variables: {
    shout: 222,
    parentId: 123,
    limit: 10,
    offset: 0,
    childrenLimit: 5,
    childrenOffset: 3 // Пропускаем первые 3 комментария (уже загруженные)
  }
});

6.1 KiB Raw Blame History Unescape Escape