도형화 휴식
기존 프로젝트 또는 엔지니어링 팀에서 GraphQL을 사용할 때 가장 간단한 시작 방법 중 하나는 GraphQL API를 기존 REST API 노드 앞에 두는 것입니다.
이렇게 하면 팀원들이 GraphQL이 제공할 수 있는 몇 가지 장점을 즉시 볼 수 있고 대량의 공사 업무를 희생할 필요가 없다.
AWS AppSync를 사용하면 HTTP 데이터 소스를 지정하여 기존 HTTP 노드를 도입하고 GraphQL에서 쿼리와 돌연변이를 수행할 수 있습니다.
두 가지 유형의 HTTP API를 통한 포트 연결 방법을 살펴보겠습니다.
입문
첫 번째 단계는 새 AWS AppSync API를 만드는 것입니다.이를 위해 AppSync dashboard에 액세스하고 API 생성 을 클릭합니다.
다음은 처음부터 구축하는 것을 선택하고 다음을 누르십시오.
처음부터 구축그런 다음 AppSync API의 이름을 지정하고 생성 을 클릭합니다.
암호화폐 GraphQL API 구축
이제 AppSync API를 만들었습니다. 첫 번째 데이터 원본을 추가해야 합니다.
The first API we’ll be converting will be the Coinlore API.
AppSync API의 왼쪽 메뉴에서 데이터 소스를 클릭합니다.
다음 을 클릭하여 데이터 원본을 만듭니다.
여기서 데이터 소스에 CryptoAPI 이름, HTTP 노드의 데이터 소스 유형 및 **https://api.coinlore.com HTTP 노드를 제공한 다음 ** 를 클릭하여 생성합니다.
이제 데이터 소스를 만들었습니다. API에 대한 요청을 살펴보겠습니다.
https://api.coinlore.com/api/tickers/
https://api.coinlore.com/api/tickers/?start=100
https://api.coinlore.com/api/tickers/?limit=100
다음은 우리가 사용할 데이터 구조를 살펴보겠습니다.
{
data: [
{
id: "90",
symbol: "BTC",
name: "Bitcoin",
nameid: "bitcoin",
rank: 1,
price_usd: "6943.53",
...
},
{
id: "80",
symbol: "ETH",
name: "Ethereum",
nameid: "ethereum",
rank: 2,
price_usd: "186.20",
...
}
],
info: {
coins_num: 2148,
time: 1557709606
}
}
이 새 유형과 조회를 만들려면 왼쪽 메뉴에서 모드를 클릭하고 다음 모드를 입력한 다음 저장을 누르십시오.
type Coin {
symbol: String
name: String
rank: String
price_usd: String
}
type Query {
listCoins(limit: Int, start: Int): [Coin]
listCoinsJSON: AWSJSON
}
You’ll notice that the listCoins query has an optional limit & start argument that we’ll need to handle in the resolver.
현재 우리는 listCoins 검색을 위한 해상도를 만드는 모드를 정의했습니다.이를 위해 모드 보기의 모드 오른쪽에 있는 해상도 목록에서 listCoins 조회를 찾으십시오.그런 다음 추가 를 클릭합니다.
분해기는 세 부분으로 구성되어 있다.
요청 맵 템플릿의 경우 다음 요청 맵 템플릿을 사용합니다.
{
"version": "2018-05-29",
"method": "GET",
"resourcePath": "/api/tickers/",
"params": {
"query": $util.toJson($ctx.args)
}
}
상기 맵 템플릿을 요청하는 검색 매개 변수에서 $ctx를 지정하고 있는 것을 볼 수 있습니다.args를 조회로 합니다.이것은 GraphQL 쿼리에 매개 변수를 전달할 수 있도록 합니다. 이 매개 변수는 쿼리 매개 변수에 비칩니다.
응답 매핑 템플릿의 경우 다음을 사용합니다.
#set($body = $util.parseJson($ctx.result.body))
$util.toJson($body.data)
새 해상도를 저장하고 왼쪽 메뉴에서 조회를 클릭합니다.
새로운 해상도를 테스트하기 위해 다음 질의를 시도할 수 있습니다.
query listCoins {
listCoins {
price_usd
name
symbol
rank
}
}
query listCoinsJSON {
listCoinsJSON
}
query listCoins {
listCoins(limit: 5) {
price_usd
name
symbol
rank
}
}
query listCoins {
listCoins(start: 10) {
price_usd
name
symbol
rank
}
}
축하드립니다. 첫 번째 REST API를 GraphQL로 성공적으로 마이그레이션했습니다!
GitHub Jobs GraphQL API 구축
다음은 GitHub Jobs API에서 작업 데이터를 어떻게 얻는지 봅시다.
API 끝점은 다음과 같습니다.
https://jobs.github.com/positions.json
https://jobs.github.com/positions.json?location=remote
https://jobs.github.com/positions.json?description=react
https://jobs.github.com/positions.json?search=javascript&page=2
먼저 GitHubJobsAPI라는 새 HTTP 데이터 소스를 만들고 HTTP 끝점을 https://jobs.github.com 로 설정합니다.
API 호출이 반환하는 데이터는 다음과 같습니다.
[
{
type: "Full Time",
url: "[https://jobs.github.com/positions/9636b280-e12a-11e8-819f-7c947fed1ee2](https://jobs.github.com/positions/9636b280-e12a-11e8-819f-7c947fed1ee2)",
company: "Homestars",
location: "Toronto",
title: "Salesforce Engineer ",
description: "WHO WE ARE: Canadians spend...."
},
{
type: "Contract",
url: "[https://jobs.github.com/positions/8c96ec9e-e130-11e8-9bb2-d87985623e61](https://jobs.github.com/positions/8c96ec9e-e130-11e8-9bb2-d87985623e61)",
created_at: "Mon Nov 05 19:26:48 UTC 2018",
company: "Rifle Paper Co.",
location: "Remote",
title: "FREELANCE PHP DEVELOPER",
description: "OVERVIEW: We are...
}
]
type Job {
title: String
description: String
url: String
type: String
company: String
location: String
}
input JobsInput {
page: String
description: String
location: String
search: String
}
type Query {
listJobs(query: JobsInput): [Job]
}
데이터 소스의 경우 이전에 만든 GitHubJobsAPI 데이터 소스를 선택합니다.
매핑 템플릿 요청의 경우 다음을 사용합니다.
{
"version": "2018-05-29",
"method": "GET",
"resourcePath": "/positions.json",
"params":{
"query":$util.toJson($ctx.args.query)
}
}
#set($body = $util.parseJson($ctx.result.body))
$util.toJson($body)
새 해상도를 저장하고 왼쪽 메뉴에서 조회를 클릭합니다.
새로운 해상도를 테스트하기 위해 다음 질의를 시도할 수 있습니다.
query listJobs {
listJobs(query: {
search: "javascript"
page: "3"
}) {
title
location
description
}
}
query listJobs {
listJobs(query: {
location: "remote"
}) {
title
location
description
}
}
query listJobs {
listJobs(query: {
description: "react native"
}) {
title
location
description
}
}
다음 단계
우리가 토론한 두 가지 예는 GET 요청만 다루었다.게시, 배치, 수정 또는 삭제하려면 어떻게 해야 합니까?
주요 차이점은 맵 템플릿 요청입니다.여기서, 당신은 방법을 정의하고, 모든 헤더나 본문을 요청에 전달할 수 있습니다.
POST 요청을 사용하여 데이터를 전달하는 방법을 살펴보겠습니다.
먼저 돌변의 정의를 살펴보자.
createItem(body: STRING): [Item]
{
"version": "2018-05-29",
"method": "POST",
"resourcePath": "/api/yourapi/",
"params": {
"body": $ctx.args.body
}
}
#set($authHeader = "Bearer " + "SOMETOKEN")
{
"version": "2018-05-29",
"method": "POST",
"resourcePath": "/api/yourapi/",
"params": {
"body": $ctx.args.body,
"headers": {
"Content-Type": "application/json",
"Authorization": $authHeader
}
}
}
결론
이 동작을 수행하는 방법에 대한 비디오 연습을 보려면 다음 비디오를 보십시오.
Amplify CLI는 현재 이 문제를 연구하고 있지만 HTTP 해상도를 직접 지원하지는 않습니다.지원은 곧 발표될 것입니다. 그때 이 글을 업데이트해서 Amplify CLI를 어떻게 사용하는지 보여 드리겠습니다.
HTTP 해상도 사용에 대한 자세한 내용은 설명서here 및 HTTP 해상도 강좌here를 참조하십시오.
My Name is . I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.
Reference
이 문제에 관하여(도형화 휴식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/open-graphql/graphqlifying-rest-mm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
