Добро пожаловать обратно!
В нашем последнем посте мы обсуждали, что такое GraphQL и как он работает. В этой части мы рассмотрим, как использовать GraphQL с оболочками API.
Как использовать GraphQL с обертками API?
GraphQL также имеет две реализации для API-оболочек:
Иллюстрация OC для пояснения серверной оболочки 👏
Для всех: что означает наличие оболочки GraphQL API на стороне сервера?
Допустим, у вас уже есть REST API и вы хотите использовать серверную оболочку для GraphQL. Нам понадобится еще один сервер (как на иллюстрации), который находится между клиентом и REST-сервером.
- Клиент будет обращаться к серверу GraphQL, не зная сервера REST.
- Сервер REST будет взаимодействовать исключительно с сервером GraphQL.
- Сервер GraphQL будет передавать данные от клиента в REST и на основе
query
от клиента будет отправлять соответствующий ответ.
Всем: 🤔 Это немного сбивает с толку, как это будет работать?
Давайте попробуем настроить и посмотрим, как это будет работать.
В последнем посте мы кратко обсудили, как работает сервер GraphQL (без оболочки).
Это был пример:
Текущая реализация оболочки на стороне сервера также будет очень похожа на эту.
Мы хотели бы расширить его, чтобы он стал нашей оболочкой сервера GraphQL.
- Для нашего REST API мы будем использовать https://jsonplaceholder.typicode.com/, который является онлайн-фальшивым REST API.
- Нам нужно настроить наш локальный сервер GraphQL, который будет запрашивать фиктивный сервер REST.
- Так что настройте наш
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.
Примечание. Может возникнуть путаница, какая часть кода куда идет 😅. Не бойтесь, мы обеспечим вас… мы добавили репозиторий здесь для оболочки на стороне клиента, который вы можете использовать для справки.
- Для этого мы будем использовать
create-react-app
иgraphql-client-wrapper
. - Нам нужно настроить несколько библиотек в нашем проекте, прежде чем двигаться дальше.
Просто запустите эти команды локально, они должны установить необходимые библиотеки:
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.