GraphQL부터.

GraphQL이란?


GraphQL은 API의 조회 언어이자 기존 데이터로 이러한 조회를 실행할 때이다.GraphQL 서버(예를 들어 Apollo GraphQL를 실행하면 기존 응용 프로그램은 매개 변수화 요청을 보내고 JSON 응답을 되돌릴 수 있다.

그것은 어떤 좋은 점이 있습니까?


GraphQL이 삶의 모든 질문에 대한 답인가요?Maaaaaybe?그러나 데이터베이스나 웹 서버가 아니라 가장 자주 헷갈리는 두 가지다.들어가자.
GraphQL은 일종의 통신 표준이다.그것의 목표는 당신이 상당히 치밀한 요청을 통해 필요한 모든 데이터를 요청하는 것이다.REST API를 개선하고 웹 페이지를 데이터로 채우기 위해 탄생했습니다.고전적 과제는 다음과 같습니다.
웹페이지: 밥이 한 장의 사진에 평론을 할 때, 나는 앨리스와 밥의 다섯 명의 공통된 친구의 개인 자료 사진이 있는 도구 힌트를 보여 주고 싶다.
응용 프로그램: 네, 이것은 밥의 사용자 기록입니다.
웹페이지: 그의 모든 친구의 신분증이 있습니다. 나는 그들의 공통된 친구가 필요합니다.
응용 프로그램: 헤이, 좋은 소식. 나는 두 사용자의 ID를 받아들이고 그들의 공통된 친구로 돌아가는 단점을 만들었다.
웹페이지:너무 좋아요!
응용 프로그램: 137명의 공통된 친구
홈페이지: 세상에, 날짜에 따라 5등 안에 들고 싶은데...됐어. 이제 그들의 개인 정보 사진을 얻을 수 있겠어?
응용 프로그램: 물론 첫 번째 친구의 "사용자"기록입니다
홈페이지:필요해-
응용 프로그램: 두 번째 친구의 완전한 사용자 기록입니다.
홈페이지:사진만 있는 거 아니야?
응용 프로그램:아니요!이것은 세 번째 친구의 사용자 기록이다.세상에, 시간이 좀 걸릴 거야, 응?누가 3g에 있어, 아미리트?
- 지느러미 -
이 사진 왜 이래?일반적으로 두 가지가 있다.
  • 과도한 캡처: 대부분의 REST API는'상위 5위'를 요구할 수 있지만 정보를 요구할 수 없다.우리는 밥의 공통된 친구만 원한다. 그리고 우리는 그들의 완전한 자료가 아니라 공통된 사진만 원한다.
  • 여러 번 왕복: 마지막 요청, 즉 다섯 명의 공통된 친구의 사용자 프로필에 대한 요청은 병행적으로 완성할 수 있지만 이전의 모든 절차는 동기화되어 전체 회답을 기다려야 다음 단계를 진행할 수 있다.만약 당신이 이것이 문제가 아니라고 생각한다면, 당신은 더 잘 알아야 한다. the public’s level of broadband access
  • 이 장면에서 이 REST API는 '엉터리 프로젝트' 가 나타나지 않았고, 사실상 일부 요청을 위해 선별과 범위 목록을 되돌려 주는 작업이 완료되었습니다.그러나 프런트엔드 페이지 팀에는 필요한 정확한 API 엔드포인트를 설정할 권한이 없습니다.이것은 중요한 관점이니, 나는 좀 강조하고 싶다.

    If you have full access to alter your REST API, you don’t need GraphQL


    만약 당신의 친구, 즉 백엔드 개발자가 당신과 합작하여 이 기능을 설정하고 있다면 사용자/views/top5mutualpics를 설정하고 필요한 데이터를 제공할 수 있습니다. 그러나 문제는 당신의 조작이 증가함에 따라 시작됩니다. 백엔드 기능은 API를 변경하지 않고 전달해야 합니다.이것은 당신의 조직이 성장하고 당신의 사용자층이 성장하고 있음을 의미할 수 있습니다. 당신은 전단이 API를 업데이트하지 않는 상황에서 성장하고 변화하기를 희망하기 때문에 이것은 좋은 일일 수 있습니다!

    GraphQL의 이점


    GraphQL에서는 데이터를 원하는 깊이와 모양으로 요청할 수 있습니다.필요한 필드만 가져올 수 있도록 요청의 범위를 은밀하게 정할 수 있습니다
    {
      hero {
        name
      }
    }
    
    다음과 같은 모양으로 JSON이 응답합니다.
    {
    
      "data": {
    
        "hero": {
    
          "name": "R2-D2"
    
        }
    
      }
    
    }
    
    이 예는 귀여운 스타워즈 API(SWAPI) 단점에서 완성되었습니다. 그것을 보십시오GraphQL interface here
    따라서 별도의/profile/profile 댓글과/profile vitals 단점을 만들어서 더욱 집중된 데이터 버전을 얻을 필요가 없습니다.GraphQL이 기존의 REST API 단점을 둘러싸고 모든 내용을 조회할 수 있는 새로운 통일된 인터페이스를 제공하는 것이 목표입니다.

    초보자의GraphQL 조회 작성 기교


    나는 GraphiQL을 유지하는 데 주력하는 Graph의 멋진 강연인 GraphiQL의rad 그래픽 브라우저를 보았다.그는 새로운 쿼리 작성자에게 더 효율적으로 GraphQL 쿼리를 작성할 방향을 제시하기 위해 GraphQL에 자동화 기능을 추가하는 것에 대해 이야기했다.검색 언어는 간단해야 하기 때문에 새로운 검색을 작성하는 작업량을 현저하게 늘려서는 안 된다.

    변수로 최적화


    GraphQ: 패라메트릭 질의에 사용됩니다.여기서 우리는 영화 제목인'새로운 희망'과 그의 친구 이름과 일치하는 특정 영웅에게 물어본다.
    
    hero(“NEW HOPE”) {
    
        name
    
        friends {
    
          name
    
        }
    
      }
    
    이것은 보기에는 좋지만, 이 검색을 업데이트하려면GraphQL 클라이언트가 문자열 조작을 해야 합니다. 예를 들어 데이터를 요청하는React 웹 응용 프로그램입니다.그 밖에 서로 다른 파라미터를 가진 후속 조회는 캐시에 이익을 얻지 못할 것이다. 왜냐하면 GraphQL 서버는 이를 새로운 조회로 간주하기 때문이다.따라서 질의에 변수를 추가한 다음 같은 질의를 반복적으로 사용하는 것이 좋습니다.
    
    query HeroNameAndFriends($episode: Episode) {
    
      hero(episode: $episode) {
    
        name
    
        friends {
    
          name
    
        }
    
      }
    
    }
    
    본문 중의 이 예와 기타 예는 모두 GraphQL learn pages에서 표절한 것이다
    현재 우리는 이벤트 변수를 업데이트하고 같은 조회를 다시 실행할 수 있다. 그러면 클라이언트에 대한 영향이 더욱 작고, 되돌아오는 속도도 더욱 빨라질 것이다.

    변수의 기본값 설정


    만약 당신이 자신, 심지어 미래의 다른 개발자를 좋아한다면, 모든 검색의 성공을 확보하기 위해 변수에 기본값을 설정할 것입니다
    query HeroNameAndFriends($episode: Episode = JEDI) {
      hero(episode: $episode) {
        name
        friends {
          name
        }
      }
    }
    
    나중에 이 검색어를 다시 사용할 수 있습니다
    HeroNameAndFriends('EMPIRE') 
    
    캐시에서 이점을 얻을 수 있습니다!

    세션으로 더 무미건조한 검색어 쓰기 ("자신을 반복하지 마라")


    GraphQL 쿼리에서 가져올 필드를 정확하게 지정할 수 있는 놀라운 기능으로, 시간이 지나면 다음과 같이 다소 지루해질 수 있습니다.
    hero(episode: $episode) {
        name
        height
        weight
        pets {
    
            name
    
            height
    
            weight
    
        }
        friends {
    
          name
    
          height
    
          weight
    
        }
    
      }
    
    만약 이것이 조회라면, 우리는 사진, ID, 친구 ID를 한 번 또 한 번 물어볼 수 있습니다. 왜냐하면 이 조회에는 더 많은 자구가 포함되어 있기 때문입니다.물론 요구할 수 있는 방법이 있다.
    `name`
    
    `height`
    
    `weight`
    
    단번에네!
    다음 세그먼트를 정의합니다.
    fragment criticalInfo on Character {
    
        name
    
        height
    
        weight
    
    }
    
    캐릭터는 단지 내가 이 예에서 사용한 라벨, 즉 이야기 속의 캐릭터일 뿐이라는 것을 주의하십시오
    현재 우리의 조회는 더욱 치밀하다.
    hero(episode: $episode) {
    
        ...criticalInfo
    
        pets {
    
          ...criticalInfo
    
        }
    
        friends {
    
          ...criticalInfo
    
        }
    
      }
    
    

    깊이 들어갈 준비 되셨나요?


    나의 다음 글은 Heroku에서 첫 번째 GraphQL 서버를 어떻게 위탁 관리하고 그 다음에 첫 번째 서비스 구조를 구축하는 방법을 소개할 것이다.
    만약 당신이 이 모든 것에 관심이 있다면, 다음 단계는 그들의 GraphQL queries right from the GraphQL team 에서 완전한 시리즈 learn page 를 얻는 것이다.
    만약 당신이GraphQL을 정말 배우고 싶다면“Learning GraphQL” Alex Banks충분한 높이Eve Porcello를 추천할 수 없습니다.
    나의 favorite train read the last few weeks는 너희들에게 이 문장과 다음 몇 편의 문장을 가져다 주었다.

    좋은 웹페이지 즐겨찾기