@use-lens 및 graphql-codegen으로 Lens API 사용 간소화

🔗 링크

andriishupta | Github

Use Lens | Github

Lens API

GraphQL Code Generator

📰 게재일

Hashnode 💻

Medium ✍️

🤓 소개

최근에 저는 Lens API를 사용하여 일부 플레이그라운드 앱을 구축했으며 반복적인 작업을 발견했습니다. 모든 프로젝트에 대해 Lens API 쿼리 및 변형을 생성하고 Apollo 클라이언트와 함께 React 후크를 사용하기 위해 사용했습니다GraphQL Code Generator.

동일한 작업을 두 번째로 수행한 후 실제 작업을 수행하는 데 시간을 절약할 수 있도록 Lens API를 보다 쉽게 ​​사용할 수 있는 라이브러리를 만들기로 결정했습니다.

오픈소스 패키지를 만들어본 적도 없고, 나만 써도 좋은 경험이 될 것 같다😅.

npm@use-lens에는 지금까지 CLI 및 react-apollo의 2개 패키지가 포함되어 있습니다. 이 기사의 뒷부분에서 사용 방법과 시기에 대해 설명할 것이며 동일한 정보를 repo's README.md에서 찾을 수 있습니다.
기사 뒷부분에서 @use-lens/*를 가장 잘 사용하는 방법을 설명하겠습니다.

또한 Lens Protocol이 너무 마음에 들어서 Github OrganizationUse Lens을 만들었고 Lens에서 작동하는 몇 가지 도구, 예제 및 앱을 개발하고 게시할 계획입니다.

기술

Lens Protocol is a composable and decentralized social graph, ready for you to build on so you can focus on creating a great experience, not scaling your users.

Own your content. Own your social graph. Own your data.

지금까지 읽으셨다면 Lens API가 무엇이고 어떻게 사용하는지 아실 것입니다. 여기에서 확인@use-lens하거나 GraphQL 코드를 생성하는 방법을 확인하려는 경우 여기에서 렌즈 프로토콜 및 API에 대해 알아보십시오.

🌿https://docs.lens.xyz .

GraphQL Code Generator - React, Next.js, Svelte, Vue with Apollo, URLQ 등 다양한 프레임워크용 플러그인이 포함된 간단한 CLI를 사용하여 GraphQL 스키마 및 작업에서 읽기 쉬운 코드를 빌드하는 도구입니다. 원하는대로 말만 해.

🧑‍💻 방법

@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-lens 단축으로 사용하면 패키지 사용처럼 느껴질 것입니다. 자세한 방법here .

@use-lens/* 사용

심플npm install --save @use-lens/%PACKAGE%과 일반 패키지로 사용하실 수 있습니다.

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

수동 GraphQL 코드 생성기

기본 접근 방식은 간단하며 공식 문서에서 따를 수 있습니다here.

상위 수준:

설치 @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

⚠️ 주의

🌿 https://docs.lens.xyz/docs/introduction:

This API is beta and not production complete yet, which means that we could change schemas and endpoints at any time without warning or notice to you. When this API is production ready, we will remove this beta warning and will endeavor to ensure that there are no changes going forward unless a major change to the protocol itself is required.

Lens API는 생산이 완료되지 않았으며 @use-lens/*도 마찬가지입니다. 제작시 참고하시기 바랍니다.

추천 용도

Lens API로 플레이하고 싶다면 주저하지 말고 일부@use-lens/* 패키지를 설치하세요. 시작하는 데 필요한 모든 것이 제공됩니다.

더 많은 제어 기능을 원하면 @use-lens/cli를 사용하여 로컬에서 코드를 생성하십시오. 이렇게 하면 패키지에 포함되어 실행되는 필수 파일이 복사됩니다graphql-codegen.
codegen.yml 로 더 많은 작업을 수행할 수 있습니다.

👨‍🏫 Apollo 클라이언트와 반응

@use-lens/react-apollo 에 대한 사용법 예시를 준비했습니다.

소스 코드 확인here

🤝 렌즈 API 문서

Lens API 문서의 전체 세트는 Lens API 사용 방법을 보여주는 Lens Protocol의 저장소인 api-examples 에서 가져왔습니다.
동일한(또는 유사한) 쿼리가 Lens API 문서의 예로 제공됩니다.

📚 요약

Lens API를 사용하여 그것이 무엇인지 확인하려면 @use-lens 또는 GraphQL Code Generator 을 사용하여 개발자 환경을 단순화하십시오.

읽어 주셔서 감사합니다! 🙇