몇 번의 클릭만으로 JSON을 GraphQL SDL로 변환

소개

StepZen의 온라인JSON2SDL tool에서는 JSON을 붙여넣고 SDL을 복사할 수 있습니다.



이 도구를 사용하면 REST 서비스를 통해 자체 GraphQL API를 훨씬 쉽게 계층화할 수 있습니다. REST 응답을 자세히 살펴보고 GraphQL 스키마 정의 언어에 각 유형과 필드를 수동으로 작성하는 대신 몇 번의 클릭으로 유추된 스키마를 준비할 수 있습니다. 변화를 만들기 위해 StepZen의 성찰 서비스에 의존합니다. 자세히 살펴보겠습니다.

예: Spotify API

Spotify API 으로 작업 중이라고 가정해 보겠습니다. 온라인 음악 저널을 위한 아티스트 프로필 페이지를 만들고 싶습니다. 사용자 인터페이스에서 작업하는 개발자는 GraphQL 요청을 사용하여 필요한 아티스트를 ID로 가져오고 싶어할 것입니다. 또한 StepZen을 사용하여 GraphQL 레이어를 생성하여 웹 사이트를 CMS와 연결했다는 사실도 알고 있습니다.

그들은 CMS용 이미지로 아티스트 프로필을 조정하기를 원할 것이므로 Spotify API를 가져올 때 이 GraphQL API 레이어에 연결하려고 합니다. 문제? Spotify는 REST API를 사용합니다.

GraphQL 기술을 펼칠 시간입니다! 일반적으로 Spotify documentation 에서 JSON 행을 스캔하여 스키마에 대한 유형을 작성하는 방법을 결정합니다.

{
  "external_urls": {
    "spotify": "string"
  },
  "followers": {
    "href": "string",
    "total": 0
  },
  "genres": ["Prog rock", "Grunge"],
  "href": "string",
  "id": "string",
  "images": [
    {
      "url": "https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228\n",
      "height": 300,
      "width": 300
    }
  ],
  "name": "string",
  "popularity": 0,
  "type": "artist",
  "uri": "string"
}

그러나 JSON2SDL 도구를 사용하면 간단한 복사/붙여넣기로 다음과 같은 결과를 얻을 수 있습니다.

type External_urls {
  spotify: String
}

type Followers {
  href: String
  total: Int
}

type Image {
  height: Int
  url: String
  width: Int
}

type Root {
  external_urls: External_urls
  followers: Followers
  genres: [String]
  href: String
  id: String
  images: [Image]
  name: String
  popularity: Int
  type: String
  uri: String
}

이제 필요한 것은 약간의 개인화, 쿼리이며 sdl 파일에 들어갈 준비가 되었습니다.

type spotify_External_Urls {
  spotify: String
}

type spotify_Followers {
  href: String
  total: Int
}

type spotify_Image {
  height: Int
  url: String
  width: Int
}

type spotify_Artist_For_ArtistsByIDList {
  external_urls: External_urls
  followers: Followers
  genres: [String]
  href: String
  id: String
  images: [Image]
  name: String
  popularity: Int
  type: String
  uri: String
}

type Query {
  spotify_ArtistsByIDList(spotify_token: Secret!, ids: String): Spotify_Artists
    @rest(
      endpoint: "https://api.spotify.com/v1/artists?ids=$ids"
      headers: [{ name: "Authorization", value: "Bearer $spotify_token" }]
    )
}

완료. 중첩된 객체가 올바르게 번역되거나 유형이 일치하지 않는 것에 대해 걱정할 필요가 없습니다. 스키마가 프런트엔드에서 사용될 준비가 되었습니다!

이 단계 이후에 SDL에 문서를 추가하려는 경우 StepZen은 a low-code way에서도 이를 수행하도록 도울 수 있습니다.

JSON2SDL 도구로 무엇을 하는지 보고 싶습니다. Discord에서 알려주세요!