AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

GraphQL로 REST API 호출이 가능한가?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • *대상자**: 프론트엔드/백엔드 개발자, GraphQL 및 REST API 통합을 고려하는 개발자
  • *난이도**: 중급 (Node.js, Express, Axios 사용 경험 필요)

핵심 요약

  • GraphQL은 REST API를 호출할 수 있으며, resolver를 통해 기존 REST 엔드포인트를 사용 가능
  • 예제 구현: Node.js + Express + Axios로 REST API를 GraphQL 서버에 래핑
  • 장점: 기존 백엔드 로직 유지 + 프론트엔드의 유연한 데이터 요청 가능

섹션별 세부 요약

1. 프로젝트 설정

  • npm init -y, express, express-graphql, graphql, axios 설치
  • 프로젝트 디렉터리 구조 생성: graphql-rest-example 폴더 생성

2. GraphQL 스키마 정의

  • User 타입 및 Query 정의:

```graphql

type User { id: ID, name: String, username: String, email: String }

type Query { user(id: ID!): User }

```

  • buildSchema 함수로 스키마 생성

3. REST API 호출 로직 구현

  • resolver에서 axios.get() 사용:

```javascript

const response = await axios.get(https://jsonplaceholder.typicode.com/users/${id});

```

  • REST 응답 데이터를 GraphQL 형식으로 매핑

4. Express 서버 구동

  • /graphql 엔드포인트 설정:

```javascript

app.use('/graphql', graphqlHTTP({ schema, rootValue: root, graphiql: true }));

```

  • 서버 실행: node index.js

5. 테스트 및 결과 확인

  • GraphQL UI에서 쿼리 실행:

```graphql

query { user(id: 1) { id, name, email } }

```

  • 결과: {"data":{"user":{"id":"1","name":"Leanne Graham","email":"Sincere@april.biz"}}}

결론

  • GraphQL과 REST API 통합은 간단한 resolver 구현으로 가능하며, 기존 시스템을 유지하면서도 프론트엔드 유연성 확보
  • 권장사항: Node.js, Express, Axios 사용, GraphQL UI 활용한 실시간 테스트
  • 핵심 팁: REST API의 엔드포인트 URL을 resolver 내부에서 동적으로 처리 가능