Превратите 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:
- Remix мое приложение Glitch
- Добавьте поле в схему
Pokemon - Добавьте его в свой запрос и посмотрите результаты в GraphQL Playground
