Добро пожаловать обратно!

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

Как использовать GraphQL с обертками API?

GraphQL также имеет две реализации для API-оболочек:

Иллюстрация OC для пояснения серверной оболочки 👏

Для всех: что означает наличие оболочки GraphQL API на стороне сервера?

Допустим, у вас уже есть REST API и вы хотите использовать серверную оболочку для GraphQL. Нам понадобится еще один сервер (как на иллюстрации), который находится между клиентом и REST-сервером.

  • Клиент будет обращаться к серверу GraphQL, не зная сервера REST.
  • Сервер REST будет взаимодействовать исключительно с сервером GraphQL.
  • Сервер GraphQL будет передавать данные от клиента в REST и на основе query от клиента будет отправлять соответствующий ответ.

Всем: 🤔 Это немного сбивает с толку, как это будет работать?

Давайте попробуем настроить и посмотрим, как это будет работать.

В последнем посте мы кратко обсудили, как работает сервер GraphQL (без оболочки).

Это был пример:

Текущая реализация оболочки на стороне сервера также будет очень похожа на эту.

Мы хотели бы расширить его, чтобы он стал нашей оболочкой сервера GraphQL.

  1. Для нашего REST API мы будем использовать https://jsonplaceholder.typicode.com/, который является онлайн-фальшивым REST API.
  2. Нам нужно настроить наш локальный сервер GraphQL, который будет запрашивать фиктивный сервер REST.
  3. Так что настройте наш express-server в server.js

На этот раз нашему серверу GraphQL не нужна отдельная конечная точка, поэтому, если вы перейдете к localhost:4000, вы сможете взаимодействовать с graphiql.

В нашем предыдущем примере наша схема была в значительной степени hello: String, но в этом случае у нас есть posts и post, которые являются массивом и объектом соответственно.

Итак, давайте перейдем к этому

Теперь, когда мы добавили наши вызовы API. Нам нужно закончить это, объявив наши типы.

Если есть какие-либо сомнения/ошибки, сообщите нам об этом.

-Перечисление всех заголовков сообщений

-Перечисление сведений о сообщении для id:1

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

Надеюсь, у вас есть представление о том, как работает серверная оболочка для GraphQL.

поделитесь в этом блоге другими иллюстрациями OC 😅

Как и было обещано, здесь мы обсудим, как интегрироваться с React.js:

Для этого мы используем apollo-client и create-react-app.

Примечание. Может возникнуть путаница, какая часть кода куда идет 😅. Не бойтесь, мы обеспечим вас… мы добавили репозиторий здесь для оболочки на стороне клиента, который вы можете использовать для справки.

  1. Для этого мы будем использовать create-react-app и graphql-client-wrapper.
  2. Нам нужно настроить несколько библиотек в нашем проекте, прежде чем двигаться дальше.

Просто запустите эти команды локально, они должны установить необходимые библиотеки:

  • npm install --save apollo-client
  • npm install --save apollo-cache-inmemory
  • npm install --save apollo-link-rest apollo-link graphql graphql-anywhere qs
  • npm install --save graphql-tag

Вы также можете выполнить `npm i -save *имя пакета` *

-Маршрут для всех наших постов

-Раут для отдельного поста с :id

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

Мы делаем наш вызов API на componentDidMount и устанавливаем состояние posts из полученных данных. Слой GraphQL, который мы создали, используется как служба, поэтому контейнеры не знают, что находится под ним. Если вы используете избыточность, вы можете интегрировать службы с действиями.

Подобно нашему подходу для Posts, мы сделали это для Post.

Это была очень рудиментарная установка для начала работы. Мы не добавили много CSS, так как сосредоточились на интеграции GraphQL как службы с нашими контейнерами.

Одним из основных недостатков использования оболочки на стороне клиента является то, что полезная нагрузка остается неизменной. В то время как с оболочкой на стороне сервера клиент получает столько, сколько требуется (что полезно для производительности веб-приложений).

Вывод

  • GraphQL можно использовать в качестве клиент-серверной оболочки поверх REST API.
  • GraphQL позволяет определить структуру ответа, не затрагивая весь бэкенд.
  • Если вы планируете перенести существующие API, вы можете использовать такие библиотеки, как apollo-client и express-graphql 😊, в зависимости от вашего подхода к переносу.
  • Здесь находится наша серверная обертка, а здесь — наша клиентская обертка.

Также дайте нам знать, что вы думаете об этом блоге 🖖.

Первоначально опубликовано на https://blog.quicklyreact.com.