GraphQL?

GraphQL

2012년 페이스북에 의해 개발된 것으로, API용 쿼리언어다. API의 데이터에 대한 이해하기 쉬운 설명을 제공하고, 클라이언트가 필요한 것을 정확하게 요청할 수 있는 능력을 제공한다.

데이터를 묘사하고 클리언트에서 필요한 데이터를 요청하고 서버에서 예측한 데이터를 받아온다.

사실 REST에서 부족한 부분을 보완하기 위해서 나왔고, 이보다 전체적으로 나은 건 아니기때문에 각자 상황에 맞게 더 나은 것을 사용 하면 된다.

 

 

 

 

이 사진을 보면,  스타워즈를 예시로 들어 한번에 데이터를 가져오는 것을 볼 수 있다.

 

 

장점

 

주로 개발 과정은 백엔드 개발자가 REST API 개발을 마치고 그 후에 프론트 엔드 개발자가 그 API에 호출해서 받아온 데이터를 이용해서 화면에 데이터를 보여준다. 하지만 이 것을 이용하게 되면 프론트엔드 개발자와 백엔드 개발자가 전체 개발 프로세스를 병렬로 작업 할 수 있다고 한다.

Overfetching(정보를 더 많이 가져오는 것)과 Underfetching(정보를 덜 가져오는 것)을 막아준다.

REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 번 요청을 보내야 할때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다.

스키마를 작성하기 떄문에 데이터가 어떻게 이루어져 있는지 알 수 있다.

type를 작성하기 때문에 요청과 응답에 유효한 데이터가 오고 간다.

 

 

 

단점

 

프론트엔드 개발자가 GraphQL 쓰는 법을 따로 숙지해야한다.

백엔드에 스키마 및 type을 정해야 하므로 번거로울 수 있다.

REST API(URL을 사용하여 리소스에 액세스하여 리소스수준에서 캐시 가능)보다 데이터를 캐싱하는 것이 까다롭다.

 

 

 

 

참고! Graph를 실제로 사용하는 대표적인 회사들:

 

 

 

 

 

GraphQL API 서버를 실행하는 방법은 Express나 Apollo를 이용하는 것인데,
그 중 가장 간단한 방법을 소개해보자면 Node.js용으로 널리 사용되는 웹 애플리케이션 프레임워크인 Express를 사용하는 것이다. 두 개의 추가 종속성을 설치해야한다.

 

먼저, 파일을 하나 생성하고, vs code로 터미널을 켜서 이를 입력해준다.

 

 

 

 

그 다음으로 필요한 모듈들을 설치해준다.

 

 

 

 

설치후, server.js 파일을 생성해준 다음 이를 작성해준다.

graphql: GraphQL.js는 Type Schema를 구축하고 해당 Type Schema에 대해 쿼리를 제공하는 두 가지 중요한 기능을 제공한다.

express-graphql: 연결 스타일 미들웨어를 지원하는 모든 HTTP 웹 프레임워크로 GraphQL HTTP 서버를 만들었다.
요청이 오면 그에 맞는 응답을 보내준다.

 

 

const express = require('express')

const { graphqlHTTP } =require('express-graphql')

const {buildSchema} =require('graphql')

const app = express();

const port =4000;

const schema = buildSchema(`

    type Query {

        description: String

    }

`);

 

const root = {

    description: "Hello world"

}

app.use('/graphql',graphqlHTTP({

    schema: schema,

    rootvalue: root

}))

 

app.listen(port, () => {

    console.log(`Running a GraphQL API server at http://localhost:${port}/graphql`)

})

 

 

express 모듈을 사용하여 웹 서버를 실행할 수 있으며, graphql 함수로 직접 쿼리를 실행하는 대신 express-graphql 라이브러리를 사용하여 "/graphql" HTTP 엔드포인트에 GraphQL API서버를 마운트 할 수있다.

 

 

 

 

 

서버를 실행하였다.

 

이제 description를 요청하면

"data":{

"description": "Hello world"

}

 

이런식으로 응답이 올 것이다.!!

 

GraphiQL를 사용하려면 다른 것을 사용하지 않아도 graphql 패키지 안에 포함되어 있기 때문에 하나의 설정만 추가적으로 작성해주면 된다.

app.use('/graphql',graphqlHTTP({

    schema: schema,

    rootvalue: root

})

 

root 아래에 바로 true 값을 넣어주면 되는 것인데,

 

app.use('/graphql',graphqlHTTP({

    schema: schema,

    rootvalue: root,

    graphiql: true

}))

 

이렇게 작성해주면 GraphiQL를 사용할 수 있다.

 

 

 

 

다시 서버를 생성하면 port 4000번에서 GraphiQL를 사용가능하다!

 

 

 

짠 이렇게 description를 치니까 Hello world가 나온 것을 직접 확인 할 수 있었다!!

 

 

음냐,,, 처음 보는 내용을 요새 많이 하는데 헷갈린다,,

많이 봐야지 ㅠㅠ 

그래도 장점이 꽤 있는거고 혹시라도 사용하게 되면 이용해봐야겠다 아자아자