GraphQL 초보자 안내서

오늘날 가장 일반적으로 논의되는 용어 중 하나는 API입니다. 많은 사람들이 API가 무엇인지 정확히 알지 못합니다. 기본적으로 API는 응용 프로그래밍 인터페이스 (Application Programming Interface)를 나타냅니다. 이름에서 알 수 있듯이 개발자, 사용자, 소비자와 같은 사람들이 데이터와 상호 작용할 수있는 인터페이스입니다.

API를 바텐더로 생각할 수 있습니다. 바텐더에게 음료를 요청하면 원하는 바를 제공합니다. 단순한. 왜 문제가 되나요?

현대 웹이 시작된 이래로 API 구축은 그리 어렵지 않았습니다. 그러나 API를 배우고 이해하는 것이 었습니다. 개발자는 API를 사용하여 무언가를 구축하거나 데이터를 소비하는 사람들의 대다수를 구성합니다. 따라서 API는 최대한 깨끗하고 직관적이어야합니다. 잘 설계된 API는 사용 및 학습이 매우 쉽습니다. 또한 직관적이고 API 디자인을 시작할 때 명심해야 할 좋은 점입니다.

우리는 오랫동안 API를 구축하기 위해 REST를 사용해 왔습니다. 이와 함께 몇 가지 문제가 발생합니다. REST 디자인을 사용하여 API를 빌드 할 때 다음과 같은 몇 가지 문제점에 직면하게됩니다.

1) 많은 엔드 포인트가 있습니다

2) 개발자가 API를 배우고 이해하는 것이 훨씬 어려울 것입니다

3) 정보의 초과 및 미달

이러한 문제를 해결하기 위해 Facebook은 GraphQL을 만들었습니다. 오늘날 GraphQL이 API를 빌드하는 가장 좋은 방법이라고 생각합니다. 이 기사에서는 오늘 배우기 시작해야하는 이유를 설명합니다.

이 기사에서는 GraphQL의 작동 방식에 대해 설명합니다. GraphQL을 사용하여 매우 잘 설계되고 효율적이며 강력한 API를 작성하는 방법을 보여 드리겠습니다.

많은 사람과 회사에서 사용하고 있기 때문에 GraphQL에 대해 이미 들어 보셨을 것입니다. GraphQL은 오픈 소스이므로 커뮤니티가 크게 성장했습니다.

이제 GraphQL의 작동 방식과 마법에 대한 모든 것을 배우기 시작했습니다.

GraphQL이란 무엇입니까?

GraphQL은 Facebook에서 개발 한 오픈 소스 쿼리 언어입니다. API를보다 효율적으로 디자인, 생성 및 소비 할 수있는 방법을 제공합니다. 기본적으로 REST를 대체합니다.

GraphQL에는 다음과 같은 많은 기능이 있습니다.

  1. 원하는 데이터를 작성하고 원하는 데이터를 정확하게 얻습니다. REST에 익숙해 졌을 때 더 이상 정보를 페치하지 않아도됩니다.
  2. 동일한 API에 대해 더 이상 버전 2 또는 버전 3을 제공하지 않는 단일 엔드 포인트를 제공합니다.
  3. GraphQL은 강력한 형식이므로 실행 전에 GraphQL 형식 시스템 내에서 쿼리의 유효성을 검사 할 수 있습니다. 보다 강력한 API를 구축하는 데 도움이됩니다.

이것이 GraphQL에 대한 기본적인 소개입니다. 왜 강력한 지, 그리고 요즘 많은 인기를 얻고있는 이유입니다. 그것에 대해 더 자세히 알고 싶다면 GraphQL 웹 사이트를 방문하여 확인하는 것이 좋습니다.

시작하기

이 기사의 주요 목표는 GraphQL 서버를 설정하는 방법을 배우는 것이 아니기 때문에 지금은 자세히 다루지 않습니다. GraphQL의 실제 작동 방식을 배우는 것이 목표이므로 Graphpack이라는 제로 구성 GraphQL 서버를 사용합니다.

프로젝트를 시작하기 위해 새 폴더를 만들고 원하는 이름을 지정할 수 있습니다. 나는 그것을 graphql-server로 명명 할 것이다 :

터미널을 열고 다음을 입력하십시오.

mkdir graphql 서버

이제 컴퓨터에 npm 또는 yarn이 설치되어 있어야합니다. 이것이 무엇인지 모른다면 npm과 yarn은 JavaScript 프로그래밍 언어의 패키지 관리자입니다. Node.js의 경우 기본 패키지 관리자는 npm입니다.

작성된 폴더 안에 다음 명령을 입력하십시오.

npm init -y

또는 원사를 사용하는 경우 :

원사 초기화

npm은 package.json 파일을 생성하고 설치 한 모든 종속성과 명령이 거기에 있습니다.

이제 우리가 사용할 유일한 의존성을 설치하겠습니다.

Graphpack을 사용하면 구성이 전혀없는 GraphQL 서버를 만들 수 있습니다. 우리는 GraphQL로 시작하기 때문에 서버 구성에 대해 걱정하지 않고 계속 진행하고 더 많은 정보를 얻을 수 있습니다.

터미널의 루트 폴더 안에 다음과 같이 설치하십시오.

npm install --save-dev 그래프 팩

또는 원사를 사용하는 경우 다음과 같이 가야합니다.

얀 추가 --dev 그래프 팩

Graphpack을 설치 한 후 package.json 파일의 스크립트로 이동하여 다음 코드를 입력하십시오.

src라는 폴더를 만들고 서버 전체에서 유일한 폴더가 될 것입니다.

src라는 폴더를 만든 다음 폴더 안에 3 개의 파일 만 만듭니다.

src 폴더 안에 schema.graphql이라는 파일을 만듭니다. 이 첫 번째 파일 안에 다음 코드를 넣으십시오.

이 schema.graphql 파일은 전체 GraphQL 스키마가됩니다. 그것이 무엇인지 모른다면 나중에 설명하겠습니다. 걱정하지 마십시오.

이제 src 폴더 안에 두 번째 파일을 만듭니다. resolvers.js라고 부르고이 두 번째 파일 안에 다음 코드를 넣습니다.

이 resolvers.js 파일은 GraphQL 연산을 데이터로 변환하기위한 지침을 제공하는 방식입니다.

마지막으로 src 폴더 안에 세 번째 파일을 만듭니다. 이 db.js를 호출하고이 세 번째 파일 안에 다음 코드를 입력하십시오.

이 자습서에서는 실제 데이터베이스를 사용하지 않습니다. 따라서이 db.js 파일은 학습 목적으로 만 데이터베이스를 시뮬레이션합니다.

이제 src 폴더는 다음과 같아야합니다 :

src
  | --db.js
  | --resolvers.js
  | --schema.graphql

이제 npm run dev 명령을 실행하거나 yarn, yarn dev를 사용하는 경우 터미널에 다음 출력이 표시됩니다.

이제 localhost : 4000으로 이동할 수 있습니다. 즉, GraphQL에서 첫 번째 쿼리, 돌연변이 및 구독을 작성할 준비가되었습니다.

보다 나은 개발 워크 플로우를위한 강력한 GraphQL IDE 인 GraphQL Playground를 볼 수 있습니다. GraphQL Playground에 대한 자세한 내용을 보려면 여기를 클릭하십시오.

개요

GraphQL에는 스키마 작성에 사용되는 고유 한 언어 유형이 있습니다. 이것은 SDL (Schema Definition Language)이라고하는 사람이 읽을 수있는 스키마 구문입니다. 어떤 기술을 사용하든 SDL은 동일합니다. 원하는 언어 나 프레임 워크와 함께 사용할 수 있습니다.

이 스키마 언어는 API의 유형을 이해하는 것이 간단하기 때문에 매우 유용합니다. 당신은 그것을 바로 보면서 이해 할 수 있습니다.

종류

타입은 GraphQL의 가장 중요한 기능 중 하나입니다. 유형은 API의 모양을 나타내는 사용자 지정 개체입니다. 예를 들어 소셜 미디어 애플리케이션을 구축하는 경우 API에는 게시물, 사용자, 좋아요, 그룹과 같은 유형이 있어야합니다.

유형에는 필드가 있으며이 필드는 특정 유형의 데이터를 반환합니다. 예를 들어 사용자 유형을 만들려면 이름, 이메일 및 연령 필드가 있어야합니다. 유형 필드는 무엇이든 가능하며 항상 데이터 유형을 Int, Float, String, Boolean, ID, 객체 유형 목록 또는 사용자 정의 객체 유형으로 반환합니다.

이제 첫 번째 Type을 작성하려면 schema.graphql 파일로 이동하여 이미 존재하는 Query 유형을 다음으로 바꿉니다.

각 사용자는 ID를 가지게되므로 ID 유형을 부여했습니다. 사용자는 또한 이름과 이메일을 갖게 될 것입니다. 그래서 우리는 그것을 String 타입과 나이를주었습니다. 아주 간단 하죠?

그러나 이것들은 어떻습니까! 모든 줄의 끝에서? 느낌표는 필드가 널 입력 가능하지 않음을 의미하며 모든 필드는 각 쿼리에서 일부 데이터를 리턴해야합니다. 사용자 유형에 포함되는 유일한 nullable 필드는 연령입니다.

GraphQL에서는 세 가지 주요 개념을 다룰 것입니다.

  1. 검색어 — 서버에서 데이터를 가져 오는 방식입니다.
  2. 변이 — 서버에서 데이터를 수정하고 업데이트 된 데이터를 다시 가져 오는 방법 (생성, 업데이트, 삭제).
  3. 구독-서버와의 실시간 연결을 유지하는 방법입니다.

나는 그들에게 모든 것을 설명 할 것입니다. 쿼리부터 시작하겠습니다.

쿼리

이를 간단한 방법으로 설명하기 위해 GraphQL의 쿼리는 데이터를 얻는 방법입니다. GraphQL의 쿼리에서 가장 아름다운 점 중 하나는 원하는 정확한 데이터를 얻을 수 있다는 것입니다. 그 이상도 이하도 아닌. 이는 API에 큰 긍정적 인 영향을 미칩니다. REST API와 마찬가지로 더 이상 페치 또는 언더 페치 정보가 없습니다.

GraphQL에서 첫 번째 유형의 쿼리를 만들 것입니다. 우리의 모든 쿼리는이 유형 안에있게됩니다. 먼저 schema.graphql로 이동하여 Query라는 새로운 유형을 작성합니다.

매우 간단합니다. 사용자 쿼리는 하나 이상의 사용자 배열을 Google에 반환합니다. !를 넣었 기 때문에 null을 반환하지 않습니다. 이는 null을 허용하지 않는 검색어임을 의미합니다. 항상 무언가를 반환해야합니다.

그러나 특정 사용자를 반환 할 수도 있습니다. 이를 위해 user라는 새로운 쿼리를 만들 것입니다. 쿼리 유형 안에 다음 코드를 입력하십시오.

이제 쿼리 유형은 다음과 같아야합니다.

보시다시피 GraphQL의 쿼리를 사용하면 인수를 전달할 수도 있습니다. 이 경우 특정 사용자를 쿼리하기 위해 ID를 전달합니다.

그러나 궁금한 점이 있습니다. GraphQL은 데이터를 어디에서 얻는 지 어떻게 알 수 있습니까? 따라서 resolvers.js 파일이 있어야합니다. 이 파일은 GraphQL에 데이터를 가져올 방법과 위치를 알려줍니다.

먼저 resolvers.js 파일로 이동하여 방금 전에 만든 db.js를 가져옵니다. resolvers.js 파일은 다음과 같아야합니다 :

이제 첫 번째 쿼리를 만들겠습니다. resolvers.js 파일로 이동하여 hello 함수를 바꾸십시오. 이제 쿼리 유형은 다음과 같아야합니다.

이제 어떻게 작동하는지 설명하십시오.

각 쿼리 확인자에는 네 개의 인수가 있습니다. 사용자 함수에서 id를 인수로 전달한 다음 전달 된 id와 일치하는 특정 사용자를 반환합니다. 꽤 간단합니다.

users 함수에서는 이미 존재하는 users 배열을 반환합니다. 항상 모든 사용자에게 반환됩니다.

이제 쿼리가 제대로 작동하는지 테스트하겠습니다. localhost : 4000으로 이동하여 다음 코드를 입력하십시오.

모든 사용자에게 반환됩니다.

또는 특정 사용자를 반환하려는 경우 :

이제 GraphQL에서 가장 중요한 기능 중 하나 인 돌연변이에 대해 배우려고합니다.

돌연변이

GraphQL에서 돌연변이는 서버의 데이터를 수정하고 업데이트 된 데이터를 다시 얻는 방법입니다. REST의 CUD (Create, Update, Delete)처럼 생각할 수 있습니다.

GraphQL에서 첫 번째 유형의 변이를 만들고 모든 변이는이 유형에 속합니다. 시작하려면 schema.graphql로 이동하여 mutation이라는 새로운 유형을 작성하십시오.

보시다시피, 우리는 세 가지 변이를 갖게 될 것입니다 :

createUser : ID, 이름, 이메일 및 연령을 전달해야합니다. 새로운 사용자를 우리에게 돌려 주어야합니다.

updateUser : 아이디와 새 이름, 이메일 또는 연령을 전달해야합니다. 새로운 사용자를 우리에게 돌려 주어야합니다.

deleteUser : ID를 전달해야합니다. 새로운 사용자를 우리에게 돌려 주어야합니다.

이제 resolvers.js 파일로 이동하여 Query 객체 아래에 다음과 같이 새로운 돌연변이 객체를 만듭니다.

이제 resolvers.js 파일은 다음과 같아야합니다 :

이제 돌연변이가 제대로 작동하는지 테스트하겠습니다. localhost : 4000으로 이동하여 다음 코드를 입력하십시오.

새로운 사용자를 반환해야합니다. 새로운 돌연변이를 만들고 싶다면 스스로 시도해 보는 것이 좋습니다! 제대로 작동하는지 확인하기 위해 만든 동일한 사용자를 삭제하십시오.

마지막으로 구독에 대해 배우고 구독이 강력한 이유에 대해 알아 보겠습니다.

구독

앞에서 말했듯이 구독은 서버와의 실시간 연결을 유지하는 방법입니다. 즉, 서버에서 이벤트가 발생하고 해당 이벤트가 호출 될 때마다 서버는 해당 데이터를 클라이언트에 보냅니다.

구독을 사용하면 다른 사용자 간의 최신 변경 사항으로 앱을 업데이트 할 수 있습니다.

기본 구독은 다음과 같습니다.

쿼리와 매우 유사하다고 말할 수 있습니다. 그러나 다르게 작동합니다.

서버에서 무언가가 업데이트되면 서버는 구독에 지정된 GraphQL 쿼리를 실행하고 새로 업데이트 된 결과를 클라이언트에 보냅니다.

이 기사에서는 구독을 다루지 않겠지 만 구독에 대한 자세한 내용을 보려면 여기를 클릭하십시오.

결론

보시다시피 GraphQL은 정말 강력한 새로운 기술입니다. 더 잘 디자인 된 API를 구축 할 수있는 진정한 힘을줍니다. 그렇기 때문에 지금 배우는 것이 좋습니다. 나를 위해 결국 REST를 대체 할 것입니다.

기사를 읽어 주셔서 감사합니다. 아래에 의견을 남겨주세요!

트위터에 나를 따라와!
GitHub에서 나를 따라와!

나는 먼 기회를 찾고 있습니다. 그에 대해 듣고 싶다면 Twitter에서 저에게 연락하십시오!