정중식의 개발공부로그

GraphQL로 REST API 감싸기

05 Nov 2020 | react next

GraphQL로 REST API 감싸기

db.js

db.js라는 파일을 따로 생성해주었습니다. 이 곳에 fetch를 이용해 API통신을 해주었습니다.(axios를 이용해도 됨)
npm i node-fetch

import fetch from 'node-fetch';

const API_URL = 'https://yts.mx/api/v2/list_movies.json?';

export const getMovies = (limit, rating) => {
  let REQUEST_URL = API_URL;
  if (limit > 0) {
    REQUEST_URL += `limit=${limit}`;
  }

  if (rating > 0) {
    REQUEST_URL += `&minimum_rating=${rating}`;
  }

  return fetch(REQUEST_URL)
    .then((res) => res.json())
    .then((json) => json.data.movies);
};

resolvers.js

import { getMovies } from './db';

const resolvers = {
  Query: {
    movies: (_, { limit, rating }) => getMovies(limit, rating),
  },
};

export default resolvers;

schema.graphql

type Movie {
  id: Int!
  title: String!
  rating: Float!
  summary: String!
  language: String!
  medium_cover_image: String!
}

type Query {
  movies(limit: Int, rating: Float): [Movie]!
}

graphql playground에서 테스트

movies에 받아올 데이터를 입력해주면 됩니다. 여기서는 title rating를 입력해줬음 

{
  movies(rating:8.5,limit:5){
    title
    rating
  }
}


데이터를 불러온 결과물

{
  "data": {
    "movies": [
      {
        "title": "Club Frontera",
        "rating": 9.1
      },
      {
        "title": "Viva the Underdogs",
        "rating": 8.5
      },
      {
        "title": "The Way I See It",
        "rating": 8.5
      },
      {
        "title": "Officer Involved",
        "rating": 8.6
      },
      {
        "title": "Uncle Tom",
        "rating": 9.1
      }
    ]
  }
}

근데 어떨때 이런 방식을 써주는걸까?

이런 방식이란?
fetch를 이용하여 api 데이터를 받아온 후 graphql schema와 resolvers를 이용하여 graphql를 사용하는 방식을 뜻한다.

  • 오래된 서버를 이용할 때
  • Graphql을 넣을 수 없을 때

Related Posts