Легкие и простые шаги для реализации разбивки на страницы на основе GraphQL Relay-Cursor в NestJS.

Разбиение на страницы в GraphQL — довольно сложная задача. Без хорошей архитектуры это может стать довольно грязным и разочаровывающим.

В этой статье будет создан простой интерфейс для реализации разбиения на страницы GraphQL в стиле ретрансляции, который вы можете использовать в любом проекте NestJS GraphQL. Цель этого интерфейса — сделать ваш код чистым, простым и организованным.

Итак, без лишних слов, давайте приступим к делу.

Что такое спецификация соединений реле курсора

Если у кого-то из вас есть вопрос о том, что, черт возьми, такое спецификация Relay Cursor Connections и почему мы должны использовать ее при реализации разбиения на страницы GraphQL, несколько месяцев назад я написал статью, объясняющую причину. Я прикрепил статью ниже:



Рекомендации по работе с разбиением на страницы GraphQL
Больше никогда не сталкивайтесь с проблемами при работе с разбиением на страницы GraphQLjavascript.plainenglish.io



Подводя итог, Спецификация Relay Cursor Connections или, сокращенно, Cursor Connections Specification, предназначена для предоставления клиентам GraphQL возможности обработки передовых методов разбивки на страницы с поддержкой связанных метаданных через сервер GraphQL.

Пример разбивки на страницы GraphQL при сохранении спецификации Cursor Connections:

{
  user {
    id
    name
    friends(first: 10, after: "opaqueCursor") {
      edges {
        cursor
        node {
          id
          name
        }
      }
      pageInfo {
        startCursor
        endCursor
        hasPreviousPage
        hasNextPage
      }
    }
  }
}

Выполнение

Шаг 1. Первый шаг, который нам нужно сделать, это установить graphql-relay в наше приложение NestJS. Мы можем установить этот пакет, выполнив следующую команду в терминале:

npm install graphql-relay

Шаг 2. Создайте новый файл с именем relay.types.ts в общей папке, желательно в общей DTO. Затем вставьте следующий код внутрь relay.types.ts.

Шаг 3. Теперь создайте другой файл с именем connection.args.ts в том же каталоге и вставьте следующий код:

Мы успешно настроили основной интерфейс, который мы можем использовать позже для реализации разбивки на страницы на основе спецификации Cursor Connections в нашем проекте NestJS.

Как это использовать

Поскольку мы реализовали основной интерфейс, пришло время его использовать. Давайте сначала создадим ресурс, где мы будем использовать его для разбиения на страницы.

Шаг 4. В NestJS мы можем легко создать ресурс, введя следующую команду:

nest g resource teams

Когда вас спросят: «Какой транспортный уровень вы используете?», введите второй, как показано ниже:

После этого он спросит вас: «Хотите ли вы сгенерировать точки входа CRUD? (Д/н)». Введите Y.

Шаг 5. Давайте теперь определим сущность нашего ресурса.

Здесь я использовал Mongoose, так как я использую MongoDB в своем проекте, но он может работать с любыми конфигурациями ORM и баз данных.

Шаг 6. Давайте создадим еще один файл с именем team.response.ts в папке DTO модуля teams.

Шаг 7. Давайте изменим theteams.resolver.ts для реализации разбивки на страницы GraphQL:

Шаг 8. Наконец, давайте изменим файл teams.service.ts.

Конечный результат

После успешного изменения всех изменений мы можем увидеть следующий вывод:

Заключение

Из приведенной выше реализации мы видим, что наш преобразователь и сервисы намного чище и понятнее. Тем не менее, мы могли бы использовать всю мощь пагинации в стиле ретрансляции в нашем приложении.

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

Ссылка

  1. https://codesandbox.io/s/q4cto
  2. https://relay.dev/graphql/connections.htm

Свяжитесь со мной через Linkedin или мой веб-сайт.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.