GraphQL이 어떻게 현실 세계에서 일을 하는지, 스펙트럼 채팅을 깊이 연구하다

만약 당신이 웹 개발자라면, 아마도GraphQL에 대해 이미 들은 적이 있을 것이다.그것은 API의 조회 방식을 철저히 바꾸었고 개발자 커뮤니티의 광범위한 사용에 따라 놀라운 속도로 증가했다.
본문은 최초로 발표되었다https://www.quod.ai/post/how-graphql-works-in-the-real-world-a-deep-dive-into-spectrum-chat
GraphQL의 규범은 페이스북의 사람들이 작성한 것으로 자바스크립트 버전을 실현했지만 현재 우리는 몇 가지 다른 언어로 이루어지고 있다.이것은 클라이언트가 API에서 필요한 내용을 정확하게 요청할 수 있도록 하는 검색 언어입니다.GraphQL은 당신에게 신기한 효과를 가져다 줍니다.마법이 뭔지 알고 싶을지도 몰라요.오늘 우리는 이 점을 주목할 것이다.

목표
본고에서 GraphQL의 배후에 있는 모든 기본 개념과 이를 더욱 좋은 웹 응용 프로그램으로 만드는 위대한 해결 방안을 깊이 있게 이해하고자 한다.
1.GraphQL 소개
2. GraphQL 개념
a, 모드
b. 유형
c, 조회, 해석 프로그램, 돌연변이
3. 스펙트럼을 사용한 GraphQL
a. 스펙트럼 소개
b. 실행 중인 쿼리

GraphQL 소개
우리가 인용문에 쓴 바와 같이 GraphQL은 페이스북에서 개발되었다.이 규범은 처음에는 내부에서 사용되었지만, 그들은 그것을 개원했다.현재 이 규범에는 몇 가지 다른 언어의 실현이 있다.GraphQL은 API 앞에 있는 쿼리 언어로 기존의 어떤 것과도 잘 통합된다.그것은 강한 유형이다. 당신이 무엇을 원하는지 정확히 알고 싶다면, 뚜렷하고 간결한 결과를 낼 것이다.REST API와 달리, GraphQL은 모든 작업을 완료하는 하나의 엔드포인트만 있습니다.예를 들어 프로그램의 제품을 삭제하려면 REST 노드는 다음과 같습니다:/api/product/{id}. 요청한 형식은 delete입니다.새 제품을 구매해야 할 경우/api/product/buy 같은 다른 단점이 있습니다. 요청 형식은 POST입니다.
GraphQL에서, 우리는 단지 하나의 단점만 있고, 거의 항상 POST 요청이 있으며, 이것은 서버에서 되돌아오는 내용을 정확하게 포함한다.요청 주체는 서버가 무엇을 보낼지 결정하지만 REST는 다르다. REST에서 서버는 무엇을 보낼지 결정한다.GraphQL의 일부 용어를 사용하기 전에 고급 개념을 더 자세히 살펴보자.

GraphQL 개념
GraphQL에 대해 토론할 필요가 있다면, 이 다섯 가지 용어가 가장 중요할 것이다.GraphQL의 아름다움은 입문은 쉬우나 매우 복잡해서 영원히 공부를 멈출 수 없다는 데 있다.

패턴
GraphQL 모델은 자원의 구조와 조직 방식, 그리고 클라이언트가 자원을 어떻게 조회하는지를 규정한다.GraphQL 모드를 DB 모드로 볼 수 있지만 API에서는 그렇지 않습니다.이 모드들은 어떤 자원을 조회에 사용할 수 있는지, 그리고 그것들을 조회하는 데 필요한 방식을 알려 줍니다.

타입
GraphQL에는 두 가지 유형이 있습니다.이들은 스칼라 유형 및 객체 유형입니다.표량 형식은 원시 데이터 형식과 유사하며, 형식의 모든 필드는 최종적으로 이와 같아야 한다.예를 들어, User라는 객체 유형이 있고 그 필드는 Student라는 다른 객체 유형을 참조하는 것으로 유추할 수 있습니다.그러나 마지막으로 인용된 필드는 표량 형식이 있어야 합니다.GraphQL에서 사용할 수 있는 표량 유형은 String, Int, Float, Boolean, ID (다른 문자열이지만 유일성을 확보함) 이다.GraphQL의 몇 가지 예시 유형을 살펴보자.

  type Message @cacheControl(maxAge: 600) {
    id: ID!
    timestamp: Date!
    thread: Thread
    content: MessageContent!
    author: ThreadParticipant! @cost(complexity: 2)
    reactions: ReactionData @cost(complexity: 1)
    messageType: MessageTypes!
    parent: Message
    modifiedAt: Date
    bot: Boolean
    sender: User! @deprecated(reason: "Use Message.author field instead")

첫 번째 줄: 이 줄의 키 type은 형식이고 그 다음에 형식의 이름, 즉 메시지임을 나타낸다.
2-12 줄: 이 줄들은 메시지 형식의 필드를 포함합니다.메시지 형식에 표량 형식과 대상 형식의 조합이 있음을 볼 수 있습니다.id와bot 필드는 표량입니다.나머지 필드는 객체 유형입니다.“!”유형 옆의 태그는 빈 필드가 될 수 없음을 나타냅니다.

조회, 돌연변이 및 해상도
쿼리 -GraphQL의 쿼리는 클라이언트가 접근할 수 있는 내용을 확인합니다.즉, API가 반환할 수 있는 내용을 정의합니다.
돌연변이-돌연변이는 데이터 자체에 대한 변경된 조회이기 때문에 돌연변이라고 부른다.
해상도 - 전통적인 웹 응용 프로그램에서, 우리는 컨트롤러가 전방에서 서버 단점으로 요청을 할 것이다.분석 프로그램은 기본적으로 REST API의 컨트롤러와 같습니다.그것들은 유형에 존재하는 서로 다른 필드의 값을 되돌려주는 함수입니다.
다음 기간 동안 우리는 이 개념들을 모두 보여주는 코드를 볼 것이다.

스펙트럼을 사용한 GraphQL

스펙트럼 소개
GraphQL 코드를 보기 위해서, 우리는 스펙트럼 채팅을 탐색할 것이다.Spectrum은 커뮤니티 기반의 채팅 플랫폼으로 직접 메시지, 그룹 메시지, 구독/구독 취소 주제와 특정 채팅 등 다른 기능을 제공한다.그러나 Spectrum은 더 이상 새로운 커뮤니티를 만들 수 없도록 GitHub 토론으로 전환하고 있다.스펙트럼은 2021년 8월 10일까지 완전히 보관되어 읽기 전용이 된다.이것은 우리가 소스 코드를 연구하는 것을 막을 수 없다. 그렇지?

실행 중인 질의
이제 우리가 이전에 토론한 대부분의 개념을 포함하는 실제 검색어를 살펴보자.

getMessageById- 쿼리

export const getMessageByIdQuery = gql`
  query getMessageById($id: ID!) {
    message(id: $id) {
      ...messageInfo
    }
  }
  ${messageInfoFragment}

getMessageByIdQuery.js의 컨텍스트에서 보기Quod AI
1-2줄: 앞의 두 줄은 getMessageByIdQuery라는 상수를 내보냅니다. GraphQL 쿼리를 할당했습니다. 이 쿼리 앞에는'query '키워드가 있습니다.Gql 템플릿 텍스트 표시는 GraphQL 조회를 작성하는 데 사용됩니다.이것은 graphql-tag 라이브러리에서 가져온 것이다.만약 주의하신다면, 검색의 입력으로 전송될 id 형식의 매개 변수 id가 있습니다.
3-7행: 검색에서 메시지 인포 앞에 세 개의 점이 있습니다(JS의spread/rest 조작부호가 아닙니다).코드의 세션을 인용하는 데 사용됩니다.당신은 fragments가 무엇인지 알고 싶습니까?그것은 기본적으로 여러 개의 조회/돌연변이 사이에서 공유할 수 있는 코드이다.이 검색에서 id를 입력으로 전달할 때 메시지를 되돌려줍니다.MessageInfo 세션은 메시지가 되돌아와야 하는 모든 다른 필드를 포함합니다. id, 시간 스탬프, 메시지 유형, 내용 등을 포함합니다.

돌연변이-돌연변이

type BanUserInput = {
  userId: string,
  reason: string,
};


export const banUserMutation = gql`
  mutation banUser($input: BanUserInput!) {
    banUser(input: $input)
  }
`;

banUserMutation.js의 컨텍스트에서 보기Quod AI
1-4줄: 돌연변이도 조회지만 데이터를 읽는 것이 아니라 업데이트하는 것입니다.이런 특수한 변이는 사용자를 금지하기 위한 것이다.앞의 네 줄은 돌연변이 입력의 입력 유형이 필요하다는 것을 나타낸다.이것은 두 개의 필드가 있는데, 하나는 userId이고, 다른 하나는 사용자를 금지하는 이유이다.
6-10줄: 이것은 돌연변이 자체의 정의를 나타낸다. 그 중에서 우리는banUser 돌연변이를 명칭으로 하고 앞에는 키워드인'돌연변이'가 있다.이것은 Banuser 필드를 가지고 있으며, 위에서 만든 Banuser Input 형식의 입력을 받습니다.

getCommunityById – 쿼리

export const getMessageByIdQuery = gql`
  query getMessageById($id: ID!) {
    message(id: $id) {
      ...messageInfo
    }
  }
  ${messageInfoFragment}
`;

getCommunityByIdQuery.js의 컨텍스트에서 보기Quod AI
1-9줄: Spectrum은 커뮤니티에 대한 것입니다. 이 특정한 조회는 id를 통해 커뮤니티를 검색하는 데 사용됩니다. id를 입력한 후 이 조회는 두 개의 세션, 즉communityInfo 세션과communityMetaData 세션을 되돌려줍니다.다음 디렉터리(spectrum/shared/graphql/fragments/community/communityMetaData.js)에서 이 두 파일을 검사하고 이 두 세션이 되돌아오는 내용을 볼 수 있습니다.  

결론
이런 것들이 있어서 우리는 이미GraphQL에서 기초 지식을 소개했고 Spectrum을 사용하는 개념도 보았다.GitHub repohere에서 코드를 보고 here에서 실행 중인 프로그램을 볼 수 있습니다.Quod AI는 검색과 내비게이션의 가장 스마트한 방식이다.우리는git 메모리 라이브러리를 개발자가 실제로 사용하는 문서로 전환할 것이다.트위터에 저희 제품과 개발자 커뮤니티 내용의 업데이트를 주목해 주세요.어플리케이션을 방문하십시오.beta.quod.ai.