Вызов REST API внутри запросов GraphQL

Вам не нужно переключать серверную часть с REST на GraphQL. Получить запрос REST внутри GraphQL.

Я считаю, что GraphQL станет будущим для получения данных во внешнем интерфейсе. GraphQL имеет много преимуществ, и одно из лучших преимуществ, которое мне лично нравится, — это разделение Backend и Frontend. Используя GraphQL, мы можем рассматривать backend и frontend как независимые сущности, что помогает обеим сущностям существовать отдельно без перерыва.

Проблема

GraphQL был публично выпущен Facebook в 2015 году, а REST API был доступен задолго до этого, поэтому для сегодняшних компаний, которые хотят перевести свой сервер на GraphQL, это будет не так просто. Кроме того, GraphQL в настоящее время работает только на сервере Apollo, смена серверов и архитектуры занимает месяцы или, может быть, год (очевидно, зависит от размера репозитория). Я понял, что выполнение этого серьезного перехода невозможно, и это приводит компанию к затруднительному положению в контексте бизнеса.

Альтернативное решение

Apollo GraphQL понимает эту проблему, поэтому предлагает решение в виде оболочки. Они создают пакет npm, который предоставляет оболочку GraphQL поверх конечной точки REST, поэтому мы просто обертываем конечную точку REST оболочкой GraphQL и отправляем запросы GraphQL к нашему REST API. Звучит интересно, нам просто не нужно менять внутреннюю архитектуру и структуру, во фронтенде мы будем делать запросы GraphQL к конечной точке REST.

Мой опыт

Я работал над графиками и диаграммами для приложения для торговли криптовалютой. Я использовал библиотеку под названием «victor-native» в react-native. На данный момент разработаны все диаграммы, единственная проблема, с которой мы сталкиваемся, заключается в том, что наши диаграммы немного медленные, а время интерактивности пользователя немного отстает почти на секунду от предыдущего. После отладки проблемы мы достигли причины проблемы,

Проблема: мы были пользователем, который извлекал тонны данных для одной диаграммы, но для создания диаграммы вам нужно только 2 значения (значение по оси X и значение по оси Y) для одной конкретной точки.

Единственное решение, которое приходит мне на ум, — это создать новую конечную точку API, которая будет возвращать только необходимые данные для диаграмм, но для выполнения этого изменения мне нужно связаться и передать идею разработчикам серверной части плюс нашего менеджера инженера, что кажется довольно трудоемким процессом. Другой способ, который мы нашли, — сделать наш запрос API как запрос GraphQL, и мы получим только необходимые данные. В конце концов, прочитав тонны статей и просмотрев несколько видео на Youtube, мы получили доступ к этому пакету самой Apollo, чтобы выполнять запросы GraphQL к конечной точке REST.

Apollo-Link-Rest

Apollo предоставляет способ обернуть конечную точку REST оболочкой GraphQL. Это решение имеет следующие преимущества:
• Вы входите в группу разработчиков внешнего интерфейса, которая хочет попробовать GraphQL, не обращаясь к группе внутренних разработчиков для реализации сервера GraphQL.

У вас нет доступа для изменения серверной части, поскольку это существующий набор API, потенциально управляемый третьей стороной.
У вас есть существующая кодовая база, но вы хотите оценить, может ли GraphQL работать для ваших нужд.
У вас большая кодовая база, и миграция GraphQL происходит на серверной части, но вы хотите использовать GraphQL сейчас, не дожидаясь!

Package: apollo-link-rest

Пакет apollo-link-rest принимает URL-адрес конечной точки REST в качестве аргумента и возвращает клиент GraphQL, который является оболочкой.

Выполнение

Нам нужны одноранговые пакеты зависимостей с apollo-link-rest для выполнения. Самый важный пакет — «@apollo/client», этот javascript Библиотека помогает вам писать запросы GraphQL, извлекать, обновлять и изменять данные приложения с помощью GraphQL. Выполните следующую команду, чтобы установить необходимые пакеты.

yarn run @apollo/client apollo-link-rest graphql qs

После установки вышеуказанных пакетов мы отделим наши запросы GraphQL от запросов REST. Мы создадим отдельную папку под названием «graphQL» внутри пакетов и будем использовать один образец GET REST API для извлечения данных во внешнем интерфейсе, но с использованием запроса GraphQL.

Конечная точка

Образец конечной точки GET, который мы будем использовать, следующий:

https://jsonplaceholder.typicode.com/users

Эта конечная точка вернет список пользователей в виде массива объектов. Каждый объект внутри массива представляет собой объект JSON с парой ключ-значение. Каждый объект выглядит следующим образом:

const singleUser = { 
  id: string,
  username: string,
  email: string,
  phone: string,
  Website: string,
  adddress: {
    street: string,
    city: string 
  },
  company: {
    name: string
  }
}

Наша основная цель — получить из запроса только необходимые данные (пару ключ-значение). Например, нам нужны только идентификатор, электронная почта, имя пользователя и название компании в качестве пары «ключ-значение», поэтому вместо получения всех данных с помощью REST мы будем получать только необходимые данные с помощью GraphQL.

Предположения

Я предполагаю, что у вас есть некоторое представление о запросе GraphQL и о том, как мы пишем запрос GraphQL во внешнем интерфейсе.

Исполнение

После создания отдельной папки внутри пакетов мы определим клиент для наших запросов GraphQL. Этот клиент примет параметры запроса. Наш клиент внутри client.js будет выглядеть так:

import { ApolloClient, InMemoryCache } from '@apollo/client';
import {  RestLink } from 'apollo-link-rest';
// Set `RestLink` with your endpoint
const restLink = new RestLink(
      { uri: 'https://jsonplaceholder.typicode.com/' }
);
// Setup your client
export const client = new ApolloClient({
   cache: new InMemoryCache(),
   link: restLink
});

Мы создали restLink с помощью конструктора RestLink, который будет принимать URL-адрес в качестве аргумента. Используя конструктор ApolloClient, мы будем передавать URL-адрес в виде ссылки и его значение в виде пары ключ-значение. Это наш основной клиент для GraphQL.

Этот клиент похож на выборку объекта, если вы использовали пакет выборки во внешнем интерфейсе. Относитесь к этому так же, как к использованию пакета fetch для выполнения запроса во внешнем интерфейсе, в котором мы передаем тело в качестве параметра, аналогично, в GraphQL каждый запрос является POST, поэтому нам нужно передать наш запрос GraphQL в качестве параметра к нашему клиентскому объекту.

Написание запроса

GraphQL обрабатывает каждый запрос API как метод POST, в GraphQL нет термина, называемого запросом GET. Под капотом GraphQL называет свой API запросом или мутацией. Вы можете сопоставить их следующим образом:

GRAPHQL => REST API
 Query => GET request in REST API, 
 Mutation => POST, PUT, DELETE, UPDATE request in REST API

Наш первый запрос будет содержать путь, тип запроса и необходимые данные тела для выполнения запроса. Кроме того, нам нужно упомянуть конструктор «@rest» в запросе GraphQL, чтобы сообщить нашему клиенту, что мы делаем запрос GraphQL к нашей конечной точке REST.

import { gql } from '@apollo/client';
export const usersQuery = gql`
 query User {
  users @rest(type: "User", path: "users"){
   id,
   username,
   email,
   company {
     name
   }
  }}
`;

Сопоставление контента

query =› Тип запроса (enum[“query”, “mutation”])
Пользователь => Имя запроса (может быть любым, но попробуйте использовать заглавную букву)
users => Данные будут возвращены с использованием this(users) в качестве «ключа»
@rest => Оператор информирует нашего клиента о нашем способе отправки запроса (в нашем случае мы должны использовать @rest, потому что мы делаем запрос GraphQL к конечной точке REST)
path =› Путь к конечной точке
{ id, username, email }=› Упоминание нужной нам структуры данных во внешнем интерфейсе в ответе API

Извлечение данных

Теперь наш клиентский объект подобен образцу метода выборки, который делает запрос, используя запрос в качестве параметра тела, и наш клиент требует запроса объект в качестве значения с query в качестве ключа.

const apiRequest = client.query({ query: queryObject })

«apiRequest», если ваша консоль является Promise, поэтому нам просто нужно использовать .затем и .catch, чтобы получить данные, возвращаемые нашей конечной точкой REST.

client.query({ query: userQuery }).then(response=> {
   console.log(response.data.users)
}).catch(error => console.log('error', error)

Заключение

Лично мне нравится эта обертка, она делает все настолько простым во внешнем интерфейсе, не меняя технический стек бэкэнда. Если вы действительно думаете о том, чтобы добавить GraphQL в качестве нового технического стека для презентации своей команде, то это лучший способ сделать это.

До следующего раза, Хорошего дня, Люди

Repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/GraphQLWithRESTAPI