Упростите использование Lens API с помощью @use-lens и graphql-codegen.

🔗 Ссылки

📰 Опубликовано

🤓 Интро

Недавно я использовал Lens API для создания некоторых игровых приложений и заметил повторяющуюся задачу: я создавал запросы и мутации Lens API для каждого проекта и использовал Генератор кода GraphQL для использования хуков React с клиентом Apollo.

Выполнив ту же работу во второй раз, я решил создать библиотеку для более удобного использования Lens API, которая сэкономила бы мне время на выполнение реальной работы.

Я никогда не создавал пакеты с открытым исходным кодом и подумал, что было бы здорово сделать это, даже если бы я использовал его 😅.

npm @use-lens пока содержит 2 пакета — CLI и react-apollo. Позже в этой статье я объясню, как и когда их использовать, и ту же информацию можно найти в README.md репозитория. Я объясню, как я вижу лучшее использование @use-lens/* позже в статье.

Кроме того, мне так понравился Lens Protocol, что я создал Github Organization Use Lens, где я планирую разрабатывать и публиковать некоторые инструменты, примеры и приложения, работающие поверх Lens.

Технологии

Lens Protocol – это компонуемый и децентрализованный социальный график, готовый к использованию, чтобы вы могли сосредоточиться на создании отличного опыта, а не на масштабировании своих пользователей.

Владейте своим контентом. Собственный социальный граф. Владейте своими данными.

Если вы дочитали до этого места — вы знаете, что такое Lens API и как его использовать. Если вы здесь, чтобы проверить @use-lens или просто проверить, как генерировать код GraphQL, изучите протокол Lens и API здесь:

🌿 docs.lens.xyz.

Генератор кода GraphQL — это инструмент для создания готового к использованию кода из вашей схемы GraphQL и операций с помощью простого интерфейса командной строки с множеством плагинов для разных фреймворков: React, Next.js, Svelte, Vue с Apollo, URLQ и другие - вы называете это.

🧑‍💻 Как

Сгенерировать с помощью @use-lens/cli

npm install --save-dev @use-lens/cli
use-lens generate %PACKAGE%

с npx

npx @use-lens/cli generate %PACKAGE%

Это скопирует основные файлы Lens API в ваш репозиторий и запустит graphql-codegen для генерации кода. По умолчанию это будет src/lens-api/index.ts. Отсюда вы можете настроить tsconfig.json, чтобы использовать его с @use-lensshortening, чтобы это выглядело как использование пакета. Подробнее о том, как это сделать здесь.

С `@use-lens/*`

Простой npm install --save @use-lens/%PACKAGE% и используйте его как обычный пакет.

import {
  GlobalProtocolStatsDocument,
  GlobalProtocolStats as GlobalProtocolStatsType,
  useGlobalProtocolStatsQuery,
  useGlobalProtocolStatsLazyQuery,
} from '@use-lens/react-apollo'

Ручной генератор кода GraphQL

Подход по умолчанию прост и может сопровождаться официальными документами здесь

На высоком уровне:

установить @graphql-codegen/cli
выбрать плагин для своего стека: например, react-apollo и установить его
получить схему и документы GraphQL
создать базовый codegen.yml для graphql-codegen
беги graphql-codegen

В codegen.yml нужно указать схему, документы, куда сохранять и с чем:

schema: schema.graphql # full schema; could be HTTP link
documents: documents.graphql # queries and mutations that you want to have
generates:
  ./src/my-api/index.ts: # where to save
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo # stack that you are going to use

⚠️ ОСТОРОЖНО

🌿 docs.lens.xyz/docs/introduction:

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

Lens API еще не готов к производству, как и @use-lens/*. Пожалуйста, имейте это в виду при переходе на производство.

👨‍🏫 Реагируйте с помощью клиента Apollo

Для @use-lens/react-apollo я подготовил пример того, как его использовать.

Ознакомьтесь с исходным кодом здесь

🤝 Документы API объектива

Полный набор документов Lens API был взят из api-examples, репозитория протокола Lens, который показывает, как использовать Lens API. Такие же (или похожие) запросы приведены в качестве примеров в документах Lens API.

📚 Резюме

Если вы хотите использовать Lens API, чтобы увидеть, что это такое — упростите свой опыт разработчика, используя @use-lens или Генератор кода GraphQL.

Спасибо за прочтение! 🙇

Первоначально опубликовано на https://blog.andriishupta.dev.

Упростите использование Lens API с помощью @use-lens и graphql-codegen.