모든 코드를 이해하면서 GraphQL 학습을 시작하는 방법을 설명하겠습니다.

다음 항목의 기본 사항을 알아야 할 수도 있지만 모든 코드를 설명할 필요는 없기 때문에 이 자습서를 시작하기 전에 이해했다고 생각하는 몇 가지 사항은 여전히 ​​견고한 기초를 구축하는 데 도움이 될 것입니다.

1) JavaScript
2) NodeJS
3) ExpressJS


이 자습서에서는 서버 측에서 데이터를 읽을 수 있는 백엔드 API를 만드는 방법을 배웁니다(예, 읽기만 가능).
단순히 "읽기"라는 단어는 데이터베이스 위치에서 웹 응용 프로그램의 서버 끝 또는 프런트 엔드로 데이터를 반환하는 작업을 의미합니다.
폴더 구조부터 시작하자

gql-basics
         |
         -- src
         |
         -- package.json  

종속성 설치:

graphql-yoga (ExpressJS 기반의 서버 프레임워크임)

 yarn add graphql-yoga

설정

src 폴더 안에 기본 설정 파일인 index.js를 생성합니다. 해당 파일에서 graphql-yoga에서 {GraphQLServer}를 가져오고 인스턴스를 만듭니다.

//import
const { GraphQLServer } = require("graphql-yoga");

//instance
const server= new graphQLServer({
//wait for this!
})

유형 정의는 무엇입니까?

유형 정의는 유형 선언이 있는 변수와 같습니다. 예를 들면 다음과 같습니다.

//open browser console

var client = [{
id:1,
name:"Elon Musk"
}]

//now check the type
if(typeof client.name === "string") { true } else {false}
//output = true

if(typeof client.id === "string") { true } else {false}
//output = false

위와 동일하게 파일을 생성하고 해당 유형으로 예상되는 모든 데이터를 정의해야 합니다. 파일 이름은 schema.graphql이며 src 내에 해당 파일을 생성합니다.

gql-basics
         |
         -- src
              |
              -- schema.graphql

이제 유형을 사용하여 첫 번째 데이터를 생성합니다.
GraphQL에서 읽기 전용 데이터는 항상 핵심 Query 요소 내에서 정의되고 나머지 데이터(Create, Update, Delete)는 핵심 요소 Mutation 내에서 정의됩니다.

//inside src/schema.graphql

type Query {
  test: String!}

위 코드에 대한 설명은 다음과 같습니다.

type : 데이터 유형을 정의하는 요소에 사용됩니다.

쿼리: 쿼리는 graphql의 읽기 전용 핵심 요소입니다

.

테스트: 테스트는 "functions()", "문자열", "부울"및 "테스트"와 같은 모든 것을 포함할 수 있는 변수라고 생각하는 필드라고 합니다. 예를 들어 데이터베이스에서 예상되는 필드에 지정한 사용자 지정 이름입니다. "피드의 트윗", "이메일", "검색한 블로그 게시물"과 같은 것이 될 수 있습니다

.

String!: 테스트 필드에서 기대하는 데이터 유형을 정의합니다. 그리고 "!"끝에 있는 기호는 null을 허용할 수 없음을 정의합니다. 즉, 콘솔에서 "test"라는 필드를 요청하면 항상 데이터를 돌려받게 됩니다.

질문

이제 Query.js라는 src 안에 파일을 만듭니다.

gql-basics
         |
         -- src
              |
              -- schema.graphql
              |
              -- Query.js

이제 빈 개체 값으로 변수를 만듭니다.

//inside src/Query.js

const Query = {
  //
};

개체 내에서 사용자가 요청할 때 "테스트"필드에 어떤 일이 발생하는지 정의합니다.
Query 개체 내부에 "키:값"쌍을 만들고 키를 테스트로 할당하고 값을 문자열(큰따옴표로 묶은 문장)으로 할당합니다. 이전에 테스트 필드가 문자열 유형 값만 반환한다고 정의했기 때문입니다.

//inside src/Query.js

const Query = {
  test:`Hello Dev.to Community :) `
};
//NodeJS style of exporting modules
//same as like: export {Query};
module.exports = {Query}

서버 실행

이제 index.js의 GraphQLServer 내부에 인수를 전달한 다음 서버를 시작합니다. 구경하다 :

const { GraphQLServer } = require("graphql-yoga");
const { Query } = require("./Query");
const resolvers = {
  Query
 
};


const server = new GraphQLServer({
  typeDefs: "./src/schema.graphql",
  resolvers
});

server.start(_ =>
  console.log(`your server is running on http://localhost:4000`)
);

여기서 GraphQL 서버는 개체를 인수로 사용하며 두 가지를 전달해야 합니다. 1) "schema.graphql"파일 안에 있는 "유형 정의"및 2) 기본적으로 데이터베이스에서 데이터를 가져와서 반환하는 파일인 "리졸버"우리에게. 예를 들어 "Query.js"파일은 하드 코딩된 문자열을 반환합니다(이 게시물에서는 데이터베이스를 사용하지 않았기 때문). 그런 다음 "start()"메서드(graphql-yoga에서 제공)를 사용하여 서버를 시작하고 성공 메시지가 포함된 템플릿 리터럴을 기록하는 함수를 작성했습니다.

이제 다음 명령을 사용하여 첫 번째 서버를 실행할 수 있습니다.

//from inside your gql-basics
//type belowcode to start the server file
node src/index.js

그러면 아래 이미지와 같은 GraphQL 플레이그라운드가 열립니다.


서둘러 🎉! 이상으로 우리는 graphql의 기본 사항을 만들고 이해했습니다. graphql에 시간을 할애해 주셔서 감사합니다. 이 튜토리얼이 마음에 드시면 저에게 알려주십시오.

다음에는 Mutation이 어떻게 작동하는지 설명하려고 합니다. 그때까지 Happy Coding!!