DevGang
Авторизоваться

Превратите REST API в GraphQL

Мне очень нравится работать с API GraphQL. Мне нравится иметь возможность получать данные в нужной форме и использовать подписки для получения их в реальном времени. В эти выходные я обнаружил, что преобразование REST API в GraphQL проще, чем кажется.

Это пошаговое руководство по превращению одной конечной точки REST в GraphQL. Как только вы можете сделать один, вы можете сделать больше 😀

Мы преобразуем endpoint API REST

Для простоты мы будем использовать простой endpoint GET в качестве отправной точки:

ПОЛУЧИТЕ https://pokeapi.co/api/v2/pokemon/pikachu/

Теперь давайте создадим endpoint GraphQL.

Определить схему GraphQL для объекта Pokemon

Сначала мы определяем наш тип GraphQL для данных Pokemon, которые мы будем возвращать из нашей новой конечной точки API:

type Pokemon {
  id:       String!
  name:     String!
  base_experience:  Int!
}

Для примера, мы ограничиваем поля, но добавляем больше, если хотите.

Определите тип GraphQL запроса

Затем мы определяем вызываемый GraphQL запрос getPokemon, который принимает id и возвращает объект Pokemon:

type Query {
  getPokemon(id: String!): Pokemon
}

Определите резолвер запросов

Когда приходит запрос getPokemon, под капотом нашего преобразователя мы отправляем запрос GET по адресу /pokemon/<id>/:

const resolvers = {
  Query: {
      getPokemon: async (_, { id }) => {

          const response = await fetch(MY_REST_URL + '/pokemon/' + id + '/');
          return response.json();
      },
  }

Попробуйте запрос в GraphQL Playground

Копия приведенного выше кода доступна для редактирования здесь, в Glitch, и работает здесь с интерактивными запросами через GraphQL Playground.

Перейдите на GraphQL Playground и попробуйте запрос, который мы только что создали:

query {
  getPokemon(id: "pikachu"){
    id
    base_experience
  }
}

Он отвечает реальными данными из PokeAPI:

{
  "data": {
    "getPokemon": {
      "id": "25",
      "base_experience": 112
    }
  }
}

Ура! В качестве практического упражнения попробуйте реализовать другое поле, кроме base_experience:

  1. Remix мое приложение Glitch
  2. Добавьте поле в схему Pokemon
  3. Добавьте его в свой запрос и посмотрите результаты в GraphQL Playground

Источник:

#GraphQL
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу