GraphQL 툴킷 인 Apollo에 대한 완전한 소개

JavaScript 학습에 관심이 있으십니까? jshandbook.com에서 무료 전자 책 받기

아폴로 소개

지난 몇 년 동안 GraphQL은 REST over API를 구축하기위한 대체 방법으로 큰 인기를 얻었습니다.

GraphQL은 서버가 고정 된 데이터 세트를 보내지 않고 클라이언트가 네트워크를 통해 전송할 데이터를 결정할 수있는 좋은 방법입니다.

또한 중첩 된 자원을 지정하여 REST API를 처리 할 때 때때로 필요하지 않은 부분을 줄일 수 있습니다.

Apollo는 GraphQL을 기반으로하는 팀 및 커뮤니티이며 프로젝트를 빌드하는 데 도움이되는 다양한 도구를 제공합니다.

apollographql.com의 Apollo 로고 제공

Apollo가 제공하는 도구는 주로 클라이언트, 서버, 엔진의 세 가지입니다.

Apollo Client는 React, Vue, Angular, Ember 및 Meteor와 같은 가장 널리 사용되는 프론트 엔드 웹 기술을 지원하여 GraphQL API를 사용하도록 도와줍니다. 또한 iOS 및 Android에서 기본 개발을 지원합니다.

Apollo Server는 GraphQL의 서버 부분으로, 백엔드와 인터페이스하여 클라이언트 요청에 응답을 보냅니다.

Apollo Engine은 클라이언트와 서버 간의 중개자 역할을 수행하는 캐싱, 성능보고,로드 측정, 오류 추적, 스키마 필드 사용 통계, 기록 통계 및 더 많은 장점을 제공하는 호스팅 인프라 (SaaS)입니다. 현재 한 달에 최대 백만 건의 요청을 무료로 제공하며 공개 소스가 아니며 무료 인 아폴로의 유일한 부분입니다. 프로젝트의 오픈 소스 부분에 자금을 제공합니다.

이 세 가지 도구가 서로 연결되어 있지 않다는 점은 주목할 가치가 있습니다. 예를 들어 Apollo Client 만 사용하여 3 단계 API와 인터페이스하거나 클라이언트를 전혀 사용하지 않고도 Apollo Server를 사용하여 API를 제공 할 수 있습니다.

아폴로 사용의 장점

모두 GraphQL 표준 사양과 호환되므로 Apollo에는 독점적이거나 호환되지 않는 기술이 없습니다.

그러나 모든 GraphQL 관련 요구에 대한 완벽한 제품군으로 모든 도구를 단일 지붕 아래에 두는 것이 매우 편리합니다.

아폴로는 사용하기 쉽고 기여하기 쉽게 노력합니다.

Apollo Client 및 Apollo Server는 모두 커뮤니티에서 커뮤니티를 위해 빌드 한 커뮤니티 프로젝트입니다. Apollo는 매우 인기있는 JavaScript 프레임 워크 인 Meteor Development Group (Meteor의 뒤에있는 회사)의 지원을받습니다.

아폴로는 일을 단순하게 유지하는 데 중점을 둡니다. 이것이 인기를 얻고 자하는 기술의 성공을위한 열쇠입니다. 대부분의 기술 또는 프레임 워크 또는 라이브러리는 중소기업의 99 %에게 과잉이 될 수 있으며 매우 복잡한 요구가있는 대기업에 적합합니다.

아폴로 클라이언트

Apollo Client는 GraphQL을위한 최고의 JavaScript 클라이언트입니다. 커뮤니티 중심이기 때문에 데이터를 표시하거나 특정 작업이 발생할 때 돌연변이를 수행하는 등 GraphQL 데이터와 인터페이스하는 UI 구성 요소를 만들 수 있도록 설계되었습니다.

Apollo Client를 사용하기 위해 응용 프로그램의 모든 내용을 변경할 필요는 없습니다. 하나의 작은 계층과 하나의 요청으로 시작하여 거기에서 확장 할 수 있습니다.

무엇보다도, Apollo Client는 처음부터 단순하고 작으며 유연하게 구축되었습니다.

이 포스트에서는 React 애플리케이션 내에서 Apollo Client를 사용하는 프로세스를 자세히 설명하겠습니다.

GitHub GraphQL API를 서버로 사용하겠습니다.

React 앱 시작

create-react-app를 사용하여 React 앱을 설정하면 매우 편리하며 필요한 것의 핵심을 추가합니다.

npx create-react-app myapp
npx는 최신 npm 버전에서 사용 가능한 명령입니다. 이 명령이 없으면 npm을 업데이트하십시오.

로 앱 로컬 서버를 시작하십시오.

원사 시작

src / index.js를여십시오 :

'반응'에서 반응 가져 오기
'react-dom'에서 ReactDOM 가져 오기
'./index.css'가져 오기
'./App'에서 앱 가져 오기
'./registerServiceWorker'에서 registerServiceWorker 가져 오기

ReactDOM.render (, document.getElementById ( 'root'))
registerServiceWorker ()

이 모든 내용을 제거하십시오.

아폴로 부스트 시작하기

Apollo Boost는 새 프로젝트에서 Apollo Client를 사용하는 가장 쉬운 방법입니다. react-apollo 및 graphql 외에도 설치합니다.

콘솔에서

원사 추가 아폴로 부스트 반응 아폴로 graphql

또는 npm으로 :

npm install apollo-boost react-apollo graphql-저장

ApolloClient 객체 생성

index.js의 apollo-client에서 ApolloClient를 가져 오는 것으로 시작하십시오.

'apollo-client'에서 {ApolloClient} 가져 오기

const 클라이언트 = 새로운 ApolloClient ()

기본적으로 Apollo Client는 현재 호스트에서 / graphql 엔드 포인트를 사용하므로 GraphQL 엔드 포인트 URI를 설정하여 GraphQL 서버에 대한 연결 세부 사항을 지정하기 위해 Apollo 링크를 사용하십시오.

아폴로 링크

아폴로 링크는 HttpLink 객체로 표현되며, 우리는 apollo-link-http에서 가져옵니다.

Apollo Link는 GraphQL 연산의 결과를 얻는 방법과 응답으로 무엇을하고 싶은지를 설명하는 방법을 제공합니다.

요컨대, GraphQL에 대해 하나씩 작동하는 여러 개의 Apollo Link 인스턴스를 만들어 원하는 최종 결과를 제공합니다. 일부 링크는 성공하지 못한 경우 일괄 처리 등을 요청하는 재시도 옵션을 제공 할 수 있습니다.

GitHub GraphQL 엔드 포인트 URI https://api.github.com/graphql을 사용하기 위해 Apollo Client 인스턴스에 Apollo Link를 추가합니다

'apollo-client'에서 {ApolloClient} 가져 오기
'apollo-link-http'에서 {HttpLink} 가져 오기

const 클라이언트 = 새로운 ApolloClient ({
  링크 : 새로운 HttpLink ({uri : 'https://api.github.com/graphql'})
})

캐싱

아직 끝나지 않았습니다. 실제 예제를 사용하기 전에 사용할 캐싱 전략을 ApolloClient에 알려야합니다. InMemoryCache가 기본값이며 시작하기에 좋은 방법입니다.

'apollo-client'에서 {ApolloClient} 가져 오기
'apollo-link-http'에서 {HttpLink} 가져 오기
'apollo-cache-inmemory'에서 {InMemoryCache} 가져 오기

const 클라이언트 = 새로운 ApolloClient ({
  링크 : 새로운 HttpLink ({uri : 'https://api.github.com/graphql'}),
  캐시 : 새로운 InMemoryCache ()
})

ApolloProvider 사용

이제 Apollo Client를 컴포넌트 트리에 연결해야합니다. 우리는 애플리케이션 컴포넌트를 메인 React 파일에 래핑하여 ApolloProvider를 사용합니다.

'반응'에서 반응 가져 오기
'react-dom'에서 ReactDOM 가져 오기
'apollo-client'에서 {ApolloClient} 가져 오기
'apollo-link-http'에서 {HttpLink} 가져 오기
'apollo-cache-inmemory'에서 {InMemoryCache} 가져 오기
'react-apollo'에서 {ApolloProvider} 가져 오기

'./App'에서 앱 가져 오기

const 클라이언트 = 새로운 ApolloClient ({
  링크 : 새로운 HttpLink ({uri : 'https://api.github.com/graphql'}),
  캐시 : 새로운 InMemoryCache ()
})

ReactDOM.render (
  
    <앱 />
  ,
  document.getElementById ( 'root')
)

Apollo Client가 초기화 된 상태에서 기본 create-react-app 화면을 렌더링하기에 충분합니다.

gql 템플릿 태그

이제 Apollo Client로 무언가를 할 준비가되었습니다. GitHub API에서 일부 데이터를 가져 와서 렌더링합니다.

이렇게하려면 gql 템플릿 태그를 가져와야합니다.

'graphql-tag'에서 gql 가져 오기

모든 GraphQL 쿼리는 다음과 같이이 템플릿 태그를 사용하여 작성됩니다.

const 쿼리 = gql`
  검색어 {
    ...
  }
`

GraphQL 요청 수행

gql은 툴셋에서 마지막으로 필요한 항목이었습니다.

이제 Apollo Client로 무언가를 할 준비가되었습니다. GitHub API에서 일부 데이터를 가져 와서 렌더링합니다.

API에 대한 액세스 토큰 확보

가장 먼저해야 할 일은 GitHub에서 개인용 액세스 토큰을 얻는 것입니다.

GitHub를 사용하면 필요한 권한을 선택할 수있는 인터페이스를 제공하여 다음을 쉽게 수행 할 수 있습니다.

이 예제 자습서를 위해 이러한 권한이 필요하지 않습니다. 개인 사용자 데이터에 액세스하기위한 것이지만 공개 리포지토리 데이터 만 쿼리합니다.

당신이 얻는 토큰은 OAuth 2.0 베어러 토큰입니다.

명령 행에서 실행하여 쉽게 테스트 할 수 있습니다.

$ curl -H "인증 : 베어러 *** _ YOUR_TOKEN_HERE _ ***"-X POST -d "\
 {\
   \ "쿼리 \": \ "쿼리 {뷰어 {로그인 {}} \"\
 } \
"https://api.github.com/graphql

결과를 제공해야합니다

{ "data": { "viewer": { "login": "*** _ YOUR_LOGIN_NAME _ ***"}}}

또는

{
  "message": "잘못된 자격 증명",
  "documentation_url": "https://developer.github.com/v4"
}

뭔가 잘못되면.

아폴로 링크를 사용하여 인증

따라서 위의 curl 요청에서와 마찬가지로 GraphQL 요청과 함께 Authorization 헤더를 보내야합니다.

Apollo Link 미들웨어를 작성하여 Apollo Client로이를 수행 할 수 있습니다. apollo-link-context 설치로 시작하십시오.

npm 설치 아폴로 링크 컨텍스트

이 패키지를 사용하면 요청 컨텍스트를 설정하여 인증 메커니즘을 추가 할 수 있습니다.

다음과 같이 setContext 함수를 참조하여이 코드에서 사용할 수 있습니다.

const authLink = setContext ((_, {헤더}) => {
  const 토큰 = '*** YOUR_TOKEN **'

  {
    헤더 : {
      ... 헤더,
      승인 :`Bearer $ {token}`
    }
  }
})

이 새로운 Apollo Link가 있으면 링크에서 concat () 메소드를 사용하여 이미 가지고있는 HttpLink로 작성할 수 있습니다.

const 링크 = authLink.concat (httpLink)

src / index.js 파일의 전체 코드는 다음과 같습니다.

'반응'에서 반응 가져 오기
'react-dom'에서 ReactDOM 가져 오기
'apollo-client'에서 {ApolloClient} 가져 오기
'apollo-link-http'에서 {HttpLink} 가져 오기
'apollo-cache-inmemory'에서 {InMemoryCache} 가져 오기
'react-apollo'에서 {ApolloProvider} 가져 오기
'아폴로 링크 문맥'에서 {setContext} 가져 오기
'graphql-tag'에서 gql 가져 오기

'./App'에서 앱 가져 오기

const httpLink = new HttpLink ({uri : 'https://api.github.com/graphql'})

const authLink = setContext ((_, {헤더}) => {
  const 토큰 = '*** YOUR_TOKEN **'

  {
    헤더 : {
      ... 헤더,
      승인 :`Bearer $ {token}`
    }
  }
})

const 링크 = authLink.concat (httpLink)

const 클라이언트 = 새로운 ApolloClient ({
  링크 : 링크,
  캐시 : 새로운 InMemoryCache ()
})

ReactDOM.render (
  
    <앱 />
  ,
  document.getElementById ( 'root')
)
경고 이 코드는 교육 목적을위한 예입니다. 전 세계가 프론트 엔드 코드에서 볼 수 있도록 GitHub GraphQL API를 공개합니다. 생산 코드는이 토큰을 비공개로 유지해야합니다.

이제이 파일의 맨 아래에서 첫 번째 GraphQL 요청을 할 수 있으며이 샘플 쿼리는 별 5 만 개가 넘는 가장 인기있는 10 개의 리포지토리의 이름과 소유자를 요청합니다.

const POPULAR_REPOSITORIES_LIST = gql`
{
  검색 (쿼리 : "stars :> 50000", 유형 : REPOSITORY, 첫 번째 : 10) {
    repositoryCount
    가장자리 {
      노드 {
        ... 리포지토리 {
          이름
          소유자 {
            로그인
          }
          몽상가
            총 합계
          }
        }
      }
    }
  }
}
`

client.query ({쿼리 : POPULAR_REPOSITORIES_LIST}). then (console.log)

이 코드를 성공적으로 실행하면 브라우저 콘솔에서 쿼리 결과가 반환됩니다.

컴포넌트에서 GraphQL 쿼리 결과 세트 렌더링

우리가 지금까지 본 것은 이미 시원합니다. 더 멋진 점은 GraphQL 결과 집합을 사용하여 구성 요소를 렌더링하는 것입니다.

우리는 Apollo Client가 부담을 주거나 데이터를 가져 와서 모든 하위 레벨을 처리하도록합니다. 이를 통해 react-apollo가 제공하는 graphql 구성 요소 향상기를 사용하여 데이터를 표시하는 데 집중할 수 있습니다.

'반응'에서 반응 가져 오기
'react-apollo'에서 {graphql} 가져 오기
'apollo-boost'에서 {gql} 가져 오기

const POPULAR_REPOSITORIES_LIST = gql`
{
  검색 (쿼리 : "stars :> 50000", 유형 : REPOSITORY, 첫 번째 : 10) {
    repositoryCount
    가장자리 {
      노드 {
        ... 리포지토리 {
          이름
          소유자 {
            로그인
          }
          몽상가
            총 합계
          }
        }
      }
    }
  }
}
`

const 앱 = graphql (POPULAR_REPOSITORIES_LIST) (props =>
  
        {props.data.loading? '': props.data.search.edges.map ((행, i) =>       
  •         {row.node.owner.login} / {row.node.name} : { ''}                    {row.node.stargazers.totalCount}                     )}    ) 기본 앱 내보내기

다음은 컴포넌트에서 렌더링 된 쿼리 결과입니다.

아폴로 서버

GraphQL 서버는 엔드 포인트에서 들어오는 요청을 수락하고 요청을 해석하고 클라이언트의 요구를 충족시키는 데 필요한 데이터를 검색합니다.

가능한 모든 언어에 대해 다양한 GraphQL 서버 구현이 있습니다.

Apollo Server는 JavaScript, 특히 Node.js 플랫폼을위한 GraphQL 서버 구현입니다.

다음과 같은 많은 인기있는 Node.js 프레임 워크를 지원합니다.

  • 표현하다
  • 하피
  • 코아
  • 재조정

아폴로 서버는 기본적으로 다음 세 가지를 제공합니다.

  • 스키마로 데이터를 설명하는 방법.
  • 리졸버의 프레임 워크는 요청을 수행하는 데 필요한 데이터를 가져 오기 위해 작성하는 함수입니다.
  • API 인증 처리를 용이하게합니다.

Apollo Server의 기본 사항을 배우기 위해 지원되는 Node.js 프레임 워크를 사용하지 않습니다. 대신, 우리는 Apollo 팀이 만든 것을 사용합니다. 이것은 우리의 학습의 기초가 될 정말 훌륭한 것입니다 : 런치 패드.

발사대

Launchpad는 Apollo 제품 우산의 일부인 프로젝트이며, CodeFen, JSFiddle에서 코드 스 니펫을 실행하는 것처럼 클라우드에서 코드를 작성하고 온라인으로 Apollo 서버를 만들 수있는 매우 놀라운 도구입니다. 또는 JSBin.

런치 패드를 사용하여 쇼케이스 또는 학습 도구와 같은 시각적 도구를 분리하는 대신 GraphQL API를 만듭니다. 공개적으로 액세스 할 수있게됩니다.

런치 패드의 모든 프로젝트는 pad라고하며 다음과 같이 GraphQL 엔드 포인트 URL이 있습니다.

https://1jzxrj129.lp.gql.zone/graphql

패드를 빌드하면 Launchpad에서 실행중인 Node.js 앱의 전체 코드를 다운로드 할 수있는 옵션을 제공하며, npm install 및 npm start 만 실행하면 Apollo GraphQL Server의 로컬 복사본이 필요합니다.

요약하면 배우고 공유하고 프로토 타입을 작성하는 데 유용한 도구입니다.

아폴로 서버 Hello World

새로운 런치 패드 패드를 작성할 때마다 Hello, World!가 표시됩니다. 아폴로 서버. 그것에 들어가 보자.

먼저 graphql-tools에서 makeExecutableSchema 함수를 가져옵니다.

'graphql-tools'에서 {makeExecutableSchema} 가져 오기

이 함수는 GraphQLSchema 객체를 스키마 정의 (GraphQL 스키마 언어로 작성)와 리졸버 세트를 제공하여 GraphQLSchema 객체를 만드는 데 사용됩니다.

스키마 정의는 쿼리에 대한 설명과 각 필드와 관련된 유형을 포함하는 템플릿 리터럴 문자열입니다.

const typeDefs =`
  검색어 {
    안녕하세요 : 문자열
  }
`

리졸버는 스키마의 필드를 리졸버 함수에 매핑하는 객체입니다. 검색어에 응답하기 위해 데이터를 조회 할 수 있습니다.

다음은 hello 필드에 대한 리졸버 함수를 포함하는 간단한 리졸버입니다.이 필드는 단순히 Hello 월드를 반환합니다! 끈:

const 리졸버 = {
  검색어 : {
    안녕하세요 : (root, args, context) => {
      '안녕하세요 세계!'
    }
  }
}

스키마 정의와 리졸버라는 두 가지 요소를 감안할 때 이전에 가져온 makeExecutableSchema 함수를 사용하여 GraphQLSchema 객체를 가져 와서 스키마 const에 할당합니다.

const 구문 내보내기 = makeExecutableSchema ({typeDefs, resolvers})

이것이 간단한 읽기 전용 API를 제공하는 데 필요한 전부입니다. 런치 패드는 작은 세부 사항을 처리합니다.

간단한 Hello World 예제의 전체 코드는 다음과 같습니다.

'graphql-tools'에서 {makeExecutableSchema} 가져 오기

const typeDefs =`
  검색어 {
    안녕하세요 : 문자열
  }
`

const 리졸버 = {
  검색어 : {
    안녕하세요 : (root, args, context) => {
      '안녕하세요 세계!'
    }
  }
}

const 구문 내보내기 = makeExecutableSchema ({
  typeDefs,
  리졸버
})

런치 패드는 API를 사용할 수있는 뛰어난 내장 도구를 제공합니다.

앞에서 말했듯이 API는 공개적으로 액세스 할 수 있으므로 패드를 로그인하고 저장하기 만하면됩니다.

https://kqwwkp0pr7.lp.gql.zone/graphql에서 엔드 포인트를 노출시키는 패드를 만들었으므로 명령 줄에서 curl을 사용하여 시도해보십시오.

컬
  -X POST \
  -H "콘텐츠 유형 : application / json"\
  --data '{ "query": "{hello}"}'\
  https://kqwwkp0pr7.lp.gql.zone/graphql

우리가 기대하는 결과를 성공적으로 제공합니다.

{
  "데이터": {
    "hello": "Hello world!"
  }
}

GraphQL 서버를 로컬로 실행

런치 패드에서 생성 한 모든 항목을 다운로드 할 수 있다고 언급했습니다.

패키지는 두 개의 파일로 구성됩니다. 첫 번째로 schema.js는 우리가 가지고있는 것입니다.

두 번째 server.js는 런치 패드에서 보이지 않았으며 이는 인기있는 Node.js 프레임 워크 인 Express를 기반으로하는 기본 Apollo 서버 기능을 제공합니다.

Apollo 서버 설정의 가장 간단한 예는 아니므로 설명을 위해 간단한 예로 바꾸겠습니다 (그러나 기본 사항을 이해 한 후에는 자유롭게 연구하십시오).

첫 번째 아폴로 서버 코드

먼저 다운로드 한 런치 패드 코드에서 npm install 및 npm start를 실행하십시오.

이전에 초기화 한 노드 서버는 파일이 변경 될 때 nodemon을 사용하여 서버를 다시 시작하므로 코드를 변경하면 변경 사항이 적용되어 서버가 다시 시작됩니다.

server.js에이 코드를 추가하십시오.

const express = require ( 'express')
const bodyParser = require ( 'body-parser')
const {graphqlExpress} = require ( '아폴로 서버 표현')
const {schema} = require ( './ schema')

const 서버 = express ()

server.use ( '/ graphql', bodyParser.json (), graphqlExpress ({스키마}))

server.listen (3000, () => {
  console.log ( 'GraphQL은 http : // localhost : 3000 / graphql에서 듣기')
})

단 11 줄만 있으면 Launchpad에서 설정 한 서버보다 훨씬 간단합니다. 필요에 따라 코드를보다 유연하게 만드는 모든 것을 제거했기 때문입니다.

코딩으로 인해 어려운 결정을 내릴 수 있습니다. 현재 얼마나 많은 유연성이 필요합니까? 깨끗하고 이해하기 쉬운 코드를 작성하여 지금부터 6 개월 동안 집어 들고 쉽게 조정할 수 있거나 다른 개발자와 팀원에게 전달하여 필요한 시간에 생산성을 높일 수 있습니까?

코드의 기능은 다음과 같습니다.

먼저 사용할 몇 개의 라이브러리를 가져옵니다.

  • 기본 네트워크 기능을 강화하여 엔드 포인트를 노출시키는 표현
  • bodyParser는 노드 본문 구문 분석 미들웨어입니다.
  • graphqlExpress는 Express 용 Apollo Server 객체입니다.
const express = require ( 'express')
const bodyParser = require ( 'body-parser')
const {graphqlExpress} = require ( '아폴로 서버 표현')

다음으로 위의 schema.js 파일에서 만든 GraphQLSchema 객체를 Schema로 가져옵니다.

const {schema} = require ( './ schema')

다음은 표준 Express 세트이며 포트 3000에서 서버를 초기화합니다.

const 서버 = express ()

이제 Apollo Server를 초기화 할 준비가되었습니다 :

graphqlExpress ({스키마})

HTTP JSON 요청에 대한 엔드 포인트에 대한 콜백으로 전달합니다.

server.use ( '/ graphql', bodyParser.json (), graphqlExpress ({스키마}))

이제 필요한 것은 Express를 시작하는 것입니다.

server.listen (3000, () => {
  console.log ( 'GraphQL은 http : // localhost : 3000 / graphql에서 듣기')
})

GraphiQL 엔드 포인트 추가

GraphiQL을 사용하면 / graphiql 엔드 포인트를 쉽게 추가하여 GraphiQL 대화식 브라우저 내 IDE로 사용할 수 있습니다.

server.use ( '/ graphiql', graphiqlExpress ({
  endpointURL : '/ graphql',
  쿼리 :``
}))

이제 Express 서버를 시작하면됩니다.

server.listen (PORT, () => {
  console.log ( 'GraphQL은 http : // localhost : 3000 / graphql에서 듣기')
  console.log ( 'GraphiQL은 http : // localhost : 3000 / graphiql'에서 청취)
})

curl을 다시 사용하여 테스트 할 수 있습니다.

컬
  -X POST \
  -H "콘텐츠 유형 : application / json"\
  --data '{ "query": "{hello}"}'\
  http : // localhost : 3000 / graphql

런치 패드 서버를 호출 한 위와 동일한 결과를 제공합니다.

{
  "데이터": {
    "hello": "Hello world!"
  }
}
JavaScript 학습에 관심이 있으십니까? jshandbook.com에서 무료 전자 책 받기