전단 에 알 아야 할 GraphQL

본 고 는 주로 GitHub GraphQL API 와 결합 하여 전단 사용자 의 측면 에서 GraphQL 에 대해 이야기 하고 GraphQL 프로젝트 가 없 는 학생 들 은 GitHub GraphQL API 를 가지 고 연습 할 수 있 습 니 다. 구체 적 인 코드 는 제 GitHub Blog 를 참조 하고 star, fork 를 환영 합 니 다.
GraphQL 이 왜 필요 합 니까?
제 블 로 그 를 예 로 들 면 현재 목록 페이지 에서 모든 글 에 필요 한 데이터 구 조 는 다음 과 같 습 니 다.

{
    "title": "       GraphQL",
    "updatedAt": "2018-04-22T03:46:34Z",
    "bodyText": "      ...",
}

한편, 글 상세 페이지 의 데이터 구 조 는 다음 과 같다.

{
    "title": "       GraphQL",
    "updatedAt": "2018-04-22T03:46:34Z",
    "bodyHTML": "
      ...",
}

또 글 의 조회 수 를 기록 하여 나중에 큰 V 가 되 어 hhh 를 보 여 드 리 고 싶 습 니 다 ~

{
    "title": "       GraphQL",
    "updatedAt": "2018-04-22T03:46:34Z",
    "bodyHTML": "
      ...",
    "view": "29898",
}

그러면 문제 가 생 겼 습 니 다. 두 페이지 의 데이터 구조 title 과 updateAt 의 데 이 터 는 중복 되 고 body 는 다 릅 니 다. 그리고 지금 은 나중에 필요 할 때 사용 할 view 필드 를 설계 하고 싶 습 니 다.편 의 를 위해 인터페이스 하나만 쓰 고 bodyText 와 bodyHTML 로 돌아 가면 데이터 가 남아 도 는 것 도 불합리 하 다.그러나 두 개의 인 터 페 이 스 를 나 누 면 좀 번 거 롭 고 낭비 적 이다.
이 는 단순 한 예 일 뿐 평소 개발 과정 에서 수요 변화 가 특히 잦 고 문제 가 더 복잡 해 질 수 있 으 며, 현재 주류 인 RESTful API 가 드 러 내 는 문제 도 점점 뚜렷 해 지고 있다.
원천 에서 출발 할 수 있다 면 인터페이스 가 되 돌아 오 는 데 이 터 는 생산 자 (백 엔 드) 가 아니 라 사용 자 (전단) 가 결정 하면 보 이 는 대로 얻 는 효 과 를 얻 을 수 있 고 이때 GrapQL 도 이에 따라 생 겨 났 다.
GraphQL 이란 무엇 입 니까?
먼저 홈 페이지: 영어 | 중국어.
GraphQL 은 API 에 사용 되 는 조회 언어 이자 데이터 조 회 를 만족 시 키 는 실행 시 입 니 다.GraphQL 은 API 의 데이터 에 대해 이해 하기 쉬 운 완전한 설명 을 제공 하여 클 라 이언 트 가 필요 한 데 이 터 를 정확하게 얻 을 수 있 고 불필요 하지 않 으 며 API 가 시간 이 지 날수 록 쉽게 발전 할 수 있 으 며 강력 한 개발 자 도 구 를 구축 하 는 데 도 사용 할 수 있 습 니 다.
즉, GraphQL 은 api 를 호출 할 때 api 가 돌아 오 는 데이터 구 조 를 결정 하여 필요 한 데 이 터 를 정확 하고 불필요 하 게 얻 을 수 있 습 니 다.GraphQL 이 이렇게 대단한 데 어떻게 했 을까요?우 리 는 먼저 나의 블 로그 글 상세 페이지 인터페이스 에 착안 하여 GraphQL 의 여산 정 체 를 밝 혔 다.

let data = {
  query: `query {
      repository(owner:"simbawus", name: "blog") {
        issue(number: ${articleId}) {
          title
          updatedAt
          bodyHTML
        }
      }
    }`
};

Actions.getIssues(data).then((res) => {
  let issue = res.data.data.repository.issue;

  this.setState({
      title: issue.title,
      updatedAt: new Date(issue.updatedAt).format('yyyy-MM-dd'),
      bodyHTML: issue.bodyHTML
  })
})

이것 은 GitHub GraphQL API 를 기반 으로 하 는 요청 입 니 다. 일반 요청 과 유일한 차이 점 은 JSON 대상 이 아니 라 문자열 입 니 다. 이 문자열 은 클 라 이언 트 가 서버 에서 데 이 터 를 되 돌려 주 기 를 원 하 는 구체 적 인 구 조 를 설명 합 니 다. 다음 JSON:

{
    "data": {
        "repository": {
            "issue": {
                "bodyHTML": "
      ...",
                "title": "       GraphQL",
                "updatedAt": "2018-04-22T03:46:34Z",
            }
        }
    }
}

이 예 를 들 어 GraphQL 의 몇 가지 핵심 개념 을 소개 하 겠 습 니 다.
query & mutation
query 의 중국어 뜻 은 검색 을 하면 RESTful 표준 중의 get 에 대응 하고 mutation 은 변경 을 의미 하 며 post, delete, patch 와 put 에 대응 합 니 다.
connection
connection 은 같은 요청 에서 관련 대상 을 조회 할 수 있 도록 합 니 다.connection 을 통 해 하나의 Graph QL 요청 만으로 RESTful API 의 여러 요청 을 수행 할 수 있 습 니 다.
예 를 들 어 GitHub GraphQL API 문서 에서 저 희 는 issue 대상 을 조회 하 는 동시에 labels 대상 도 찾 을 수 있 습 니 다.

let data = {
  query: `query {
      repository(owner:"simbawus", name: "blog") {
        issue(number: ${articleId}) {
          title
          updatedAt
          bodyHTML
        }
        labels(first: 100){
          nodes{
            name
          }
        }
      }
    }`
};

field
field 는 대상 에서 가 져 올 수 있 는 데이터 셀 입 니 다.GraphQL 공식 문서 에서 말 한 것 처럼 "GraphQL 조회 언어 는 본질 적 으로 대상 에서 field 를 선택 하 는 것 이다."모든 GraphQL 작업 은 응답 결과 의 구조 가 틀 리 지 않도록 맨 밑 에 있 는 field 를 가리 키 고 반환 값 을 스칼라 로 해 야 합 니 다.
argument
argument 는 RESTful API 표준 과 일치 합 니 다. 이 인 터 페 이 스 를 요청 하 는 매개 변수 입 니 다. 예 를 들 어 위의 issue 의 number 매개 변 수 는 요청 한 제 ${articleId} 번 째 issue 를 표시 합 니 다.
전단 에 있어 GraphQL API 를 조회 할 때 위 에서 말 한 이 몇 가지 개념 을 기본적으로 알 아야 합 니 다. 구체 적 인 응용 은 제 글 이 GitHub GraphQL API 를 어떻게 이용 하여 개인 블 로 그 를 개발 하 는 지 참고 할 수 있 습 니 다.자세 한 코드 는 제 github: simbawus / blog 를 볼 수 있 습 니 다. star, fork 를 환영 합 니 다.
GraphQL 의 미래
GraphQL 의 장점 은 모두 가 알 고 있 을 것 입 니 다. 그런데 왜 이렇게 좋 은 기술 은 광범 위 한 응용 과 홍 보 를 얻 지 못 했 습 니까?

전단 에 GrapQL 을 시원 하 게 사용 하려 면 서버 에 GrapQL spec 에 맞 는 인 터 페 이 스 를 구축 해 야 한다. 기본적으로 전체 변경 서버 에서 데 이 터 를 노출 하 는 방식 이다.아 픈 점 은 전단 인 데 백 엔 드 를 개조 해 야 하 는데 누가 하 겠 는가?

GraphQL 로 바 꾸 는 것 은 사용자 체험 에 있어 아무런 향상 이 없 을 뿐만 아니 라 백 엔 드 수준 에 대한 요구 도 높 아서 바 꾸 는 것 이 간단 하지 않 습 니 다. 많은 시간 이 필요 합 니 다. 사장 님 은 월급 을 지불 하지 않 아 도 됩 니까?

GraphQL 은 중심 화 된 API 게 이 트 웨 이 를 의미 하고 중심 화 된 트 래 픽 은 커 다란 중심 화 클 러 스 터 를 요구 하 며 기술적 인 운영 에 있어 또 하나의 어 려 운 문제 이다.

이상 을 바탕 으로 GrapQL 은 현재 기본적으로 기술적 추구 와 실력 이 있 는 창업 회사 와 일 선 공장 에서 사용 되 고 있 으 며 페 이 스 북 이 더욱 진일보 하여 클 라 우 드 기반 의 해결 방안 을 제시 하여 전단 을 해방 시 키 기 를 바란다.
토론 을 환영 합 니 다. 좋아요 하고 가세 요 ~
배 고 파 요. 배 고 파 요.
simbawu | github | segmentfault | 알 고 있 습 니까?