Автор оригинала: Flavio Copes.
Введение в Аполлон
В последние несколько лет Graphql Популярно стал чрезвычайно популярным в качестве альтернативного подхода к созданию API на отдых.
GraphQL – отличный способ позволить клиенту решить, какие данные они хотят передаваться по сети, а не наличие сервера, отправляют фиксированный набор данных.
Кроме того, он позволяет вам указывать вложенные ресурсы, уменьшая назад и вперед, иногда требуется при работе с API для отдыха.
Apollo – это команда и сообщество, которая строит на вершине GraphQL, а также предоставляет различные инструменты, которые помогут вам построить свои проекты.
Инструменты, предоставляемые APOLLO, являются в основном три: Клиент , Сервер , Двигатель Отказ
Apollo Client Помогает вам потреблять API GraphQL, при поддержке самых популярных веб-технологий Frontend, таких как React, Vue, Angular, Ember и Meteor. Он также поддерживает нативное развитие на iOS и Android.
Apollo Server Это серверная часть GraphQL, которая взаимодействует с вашей бэкэнда и отправляет ответы обратно на клиентские запросы.
Apollo Engine Является ли размещенной инфраструктурой (SAAS), которая служит средним человеком между клиентом и вашим сервером, обеспечивая кэширование, отчетность по производительности, отчету нагрузки, отслеживание ошибок, статистику использования схемы, историческую статистику и еще много вкусностей. В настоящее время он свободен до 1 миллиона запросов в месяц, и это единственная часть Аполлона, который не является открытым исходным кодом и бесплатно. Он обеспечивает финансирование для открытого исходного кода. Часть проекта.
Стоит отметить, что эти три инструмента никоим образом не связаны друг с другом, и вы можете использовать только клиент Apollo для интерфейса с API с 3-й частью или служить API с помощью сервера APOLLO, не имея клиента вообще, например.
Некоторые преимущества использования Apollo
Это все Совместим с стандартной спецификацией GraphQL Таким образом, нет запатентованной или несовместимой техники в Аполлоне.
Но очень удобно иметь все эти инструменты вместе под одной крышей в качестве комплектации для всех ваших потребностей, связанных с GraphQL.
Аполлон стремится быть простым в использовании и легко внесении вклад в.
Client Apollo Client и Server Apollo – все сообщественные проекты, построенные сообществом, для сообщества. Аполлон поддерживается Meteor Group Group (Компания за Meteor ), очень популярный JavaScript Framework.
Аполлон ориентирован на Хранить вещи простыми Отказ Это что-то ключевое, к успеху технологии, которая хочет стать популярной. Большая часть технологий или кадров или библиотек и библиотеки может быть дополнена на 99% малых или средних компаний, и действительно подходит для крупных компаний с очень сложными потребностями.
Apollo Client.
Apollo Client является ведущим клиентом JavaScript для GraphQL. Поскольку это, управляемый сообществом, он предназначен для создания компонентов пользовательских интерфейсов, который интерфейс с данными GraphQL – либо в отображении этих данных, либо при выполнении мутаций, когда случаются определенные действия.
Вам не нужно все менять в своем заявлении, чтобы использовать клиента Apollo. Вы можете начать с одного крошечного слоя и одного запроса и расширить оттуда.
Больше всего клиент Apollo построен, чтобы быть простым, маленьким и гибким с нуля.
В этом посте я собираюсь подробно описать процесс использования клиента APOLLO в рамках приложения React.
Я буду использовать Github graphql api как сервер.
Запустить приложение ract
Я использую Create-React-App Чтобы настроить приложение React, которое очень удобно и просто добавляет голые кости того, что нам нужно:
npx create-react-app myapp
Запустите приложение локальный сервер с
yarn start
Открыть SRC/index.js :
import React from 'react'import ReactDOM from 'react-dom'import './index.css'import App from './App'import registerServiceWorker from './registerServiceWorker'ReactDOM.render(, document.getElementById('root'))registerServiceWorker()
И удалить все это содержание.
Начните с Apollo Boost
Apollo Boost – самый простой способ начать использовать клиента Apollo в новом проекте. Мы устанавливаем это в дополнение к React-Apollo и graphql Отказ
В консоли запустить
yarn add apollo-boost react-apollo graphql
или с NPM:
npm install apollo-boost react-apollo graphql --save
Создать объект Apolloclient
Вы начинаете, импортируя ApollocLient из Apollo-Client в index.js :
import { ApolloClient } from 'apollo-client'const client = new ApolloClient()По умолчанию клиент Apollo использует /graphql Конечная точка на текущем хосте, так что давайте использовать Apollo Link Чтобы указать детали подключения к серверу GraphQL, установив URI конечной точки GraphQL.
Аполлон ссылки
Ссылка Apollo представлена Httplink объект, который мы импортируем из Apollo-link-http Отказ
Apollo Link предоставляет нам способ описать, как мы хотим получить результат операции GraphQL, и то, что мы хотим сделать с ответом.
Короче говоря, вы создаете несколько экземпляров ссылок Apollo, которые все действуют на запросе на график один за другим, предоставляя конечный результат, который вы хотите. Некоторые ссылки могут дать вам возможность повторить попытку запроса, если не успешно, дозируя и многое другое.
Мы добавим ссылку APOLLO на наш экземпляр клиента APOLLO для использования EndPoint Github GraphQL URI https://api.github.com/graphql.
import { ApolloClient } from 'apollo-client'import { HttpLink } from 'apollo-link-http'const client = new ApolloClient({ link: new HttpLink({ uri: 'https://api.github.com/graphql' })})Кэширование
Мы еще не закончены. Прежде чем иметь рабочий пример, мы должны также сказать Apolloclient который Кэширование стратегии Использовать: Inmemorycache По умолчанию, и это хороший, с которым можно начать.
import { ApolloClient } from 'apollo-client'import { HttpLink } from 'apollo-link-http'import { InMemoryCache } from 'apollo-cache-inmemory'const client = new ApolloClient({ link: new HttpLink({ uri: 'https://api.github.com/graphql' }), cache: new InMemoryCache()})Используйте Аполлопровидер
Теперь нам нужно подключить клиент Apollo к нашему компоненту дерева. Мы это используем Аполлопровидер , путем упаковки нашего компонента приложений в главный файл RACH:
import React from 'react'import ReactDOM from 'react-dom'import { ApolloClient } from 'apollo-client'import { HttpLink } from 'apollo-link-http'import { InMemoryCache } from 'apollo-cache-inmemory'import { ApolloProvider } from 'react-apollo'import App from './App'const client = new ApolloClient({ link: new HttpLink({ uri: 'https://api.github.com/graphql' }), cache: new InMemoryCache()})ReactDOM.render( , document.getElementById('root'))Этого достаточно, чтобы сделать по умолчанию Create-React-App Экран с клиентом Apollo инициализирован:
Тег шаблона GQL
Теперь мы готовы сделать что-то с помощью клиента Apollo, и мы собираемся получить некоторые данные с API GitHUB и визуализировать его.
Для этого нам нужно импортировать GQL Метка шаблона:
import gql from 'graphql-tag'
Любой запрос GraphQL будет построен с помощью этого тега шаблона, как это:
const query = gql` query { ... }`Выполнить запрос на график
GQL Был последний пункт, который нам нужен на нашем насущественном настроении.
Теперь мы готовы сделать что-то с помощью клиента Apollo, и мы собираемся получить некоторые данные с API GitHUB и визуализировать его.
Получить токен доступа для API
Первое, что нужно сделать, это получить личный токен доступа от github.
GitHub позволяет легко предоставлять интерфейс, из которого вы выбираете любое разрешение, которое вам может понадобиться:
Ради этого примера Учебное пособие вам не нужна никаких из этих разрешений. Они предназначены для доступа к частным пользовательским данным, но мы просто запросим данные публичных репозиториев.
Токен, который вы получаете, это OAUTH 2.0 Токен предъявителя Отказ
Вы можете легко проверить его, запустив из командной строки:
$ curl -H "Authorization: bearer ***_YOUR_TOKEN_HERE_***" -X POST -d " \ { \ \"query\": \"query { viewer { login }}\" \ } \" https://api.github.com/graphqlкоторый должен дать вам результат
{"data":{"viewer":{"login":"***_YOUR_LOGIN_NAME_***"}}}или
{ "message": "Bad credentials", "documentation_url": "https://developer.github.com/v4"}Если что-то пошло не так.
Используйте ссылку Apollo для аутентификации
Итак, нам нужно отправить Авторизация Заголовок вместе с нашим запросом на график, так же, как мы сделали в Curl запрос выше.
Мы можем сделать это с клиентом Apollo, создав промежуточное программное обеспечение Apollo Link. Начните с установки APOLLO-LINK-CONSTEXT :
npm install apollo-link-context
Этот пакет позволяет нам добавлять механизм аутентификации, установив контекст наших запросов.
Мы можем использовать его в этом коде, ссылаясь на setcontext Функция таким образом:
const authLink = setContext((_, { headers }) => { const token = '***YOUR_TOKEN**' return { headers: { ...headers, authorization: `Bearer ${token}` } }})И как только у нас есть эта новая ссылка Apollo, мы можем составить Это с Httplink. Мы уже имели, используя CONCAT () Способ по ссылке:
const link = authLink.concat(httpLink)
Вот полный код для SRC/index.js Файл с кодом, который мы имеем сейчас:
import React from 'react'import ReactDOM from 'react-dom'import { ApolloClient } from 'apollo-client'import { HttpLink } from 'apollo-link-http'import { InMemoryCache } from 'apollo-cache-inmemory'import { ApolloProvider } from 'react-apollo'import { setContext } from 'apollo-link-context'import gql from 'graphql-tag'import App from './App'const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' })const authLink = setContext((_, { headers }) => { const token = '***YOUR_TOKEN**' return { headers: { ...headers, authorization: `Bearer ${token}` } }})const link = authLink.concat(httpLink)const client = new ApolloClient({ link: link, cache: new InMemoryCache()})ReactDOM.render( , document.getElementById('root'))Теперь мы можем сделать первый запрос на график внизу этого файла, и этот пример запроса просит имена и владельцев 10 самых популярных репозиториев с более чем 50 тысячными звездами:
const POPULAR_REPOSITORIES_LIST = gql`{ search(query: "stars:>50000", type: REPOSITORY, first: 10) { repositoryCount edges { node { ... on Repository { name owner { login } stargazers { totalCount } } } } }}`client.query({ query: POPULAR_REPOSITORIES_LIST }).then(console.log)Запуск этого кода успешно возвращает результат нашего запроса в консоли браузера:
Оказывать результат результата запроса GraphQL в компоненте
То, что мы видели до сих пор уже круто. Каким даже прохладнее использует результат GraphQL, чтобы сделать ваши компоненты.
Мы позволили клиенту APOLLO иметь бремя (или радость) или получать данные и обрабатывать все низкоуровневые вещи. Это позволяет нам сосредоточиться на показании данных, используя graphql Enhancer компонента, предлагаемый React-Apollo :
import React from 'react'import { graphql } from 'react-apollo'import { gql } from 'apollo-boost'const POPULAR_REPOSITORIES_LIST = gql`{ search(query: "stars:>50000", type: REPOSITORY, first: 10) { repositoryCount edges { node { ... on Repository { name owner { login } stargazers { totalCount } } } } }}`const App = graphql(POPULAR_REPOSITORIES_LIST)(props => - {props.data.loading ? '' : props.data.search.edges.map((row, i) =>
- {row.node.owner.login} / {row.node.name}: {' '} {row.node.stargazers.totalCount} )}
Вот результат нашего запроса, представленного в компоненте?
Apollo Server
Сервер GraphQL имеет задание приема входящих запросов на конечной точке, интерпретировать запрос и просматривать любые данные, необходимые для удовлетворения потребностей клиента.
Есть тонны различных реализаций сервера GraphQL для каждого возможного языка.
Apollo Server – это реализация сервера GraphQL для JavaScript, в частности для платформы Node.js Отказ
Он поддерживает множество популярных структур Node.js, в том числе:
Сервер Apollo в основном дает нам три вещи:
- Способ описать наши данные с Схема Отказ
- Рамки для Резольверы , которые являются функциями, которые мы пишем, чтобы получить данные, необходимые для выполнения запроса.
- Это облегчает обработку Аутентификация для нашего API.
Ради изучения основ сервера Apollo мы не собираемся использовать какие-либо из поддерживаемых фреймворков Node.js. Вместо этого мы будем использовать то, что было построено командой Apollo, что-то действительно здорово, что будет основой нашего обучения: LaunchPad.
Launchpad
LaunchPad Это проект, который является частью зонтика продуктов Аполлона, и это довольно удивительный инструмент, который позволяет нам написать код в облаке и создать сервер Apollo онлайн, так же, как мы запустим фрагмент кода на кодепене, jsfiddle или Jsbin.
За исключением того, что вместо того, чтобы построить визуальный инструмент, который будет выделен там, и имел в виду просто как витрина или в качестве инструмента обучения, с LastPAD мы создаем API GraphQL. Это будет общедоступно.
Каждый проект на LaunchPad называется Pad И имеет свой URL конечной точки графики, как:
https://1jzxrj129.lp.gql.zone/graphql
После того, как вы построете Pad, LaunchPad дает вам возможность загрузить полный код приложения Node.js, который он работает, и вам просто нужно запустить Установка NPM и NPM начать иметь локальную копию вашего сервера GraphQL Apollo.
Подводя итоги, это Отличный инструмент для изучения, доли и прототипа Отказ
Apollo Server Hello World
Каждый раз, когда вы создаете новую запускную панель прокладка Вы представлены привет, World! APOLLO SERVER. Давайте погрузимся в это.
Сначала вы импортируете Makeexecutableschema Функция от graphql-tools Отказ
import { makeExecutableSchema } from 'graphql-tools'Эта функция используется для создания Graphqlschema Объект, предоставляя ему определение схемы (написанное в GraphQL Schema Язык ) и набор резольвенторы .
Определение схемы – это буквальная строка шаблона, содержащая описание нашего запроса и типов, связанных с каждым полем:
const typeDefs = ` type Query { hello: String }`А Resolver это объект, который отображает поля в схеме к функциям Resolver. Это может поискать данные, чтобы ответить на запрос.
Вот простой резолюст, содержащий функцию Resolver для Привет поле, которое просто возвращает Привет, мир! нить:
const resolvers = { Query: { hello: (root, args, context) => { return 'Hello world!' } }}Учитывая эти два элемента, определение схемы и резолюстры, мы используем Makeexecutableschema Функция мы ранее импортировали, чтобы получить Graphqlschema Объект, который мы назначаем Схема const.
export const schema = makeExecutableSchema({ typeDefs, resolvers })Это Все Вам нужно обслуживать простой только для чтения API. LaunchPad заботится о крошечных деталях.
Вот полный код для простого примера Hello World:
import { makeExecutableSchema } from 'graphql-tools'const typeDefs = ` type Query { hello: String }`const resolvers = { Query: { hello: (root, args, context) => { return 'Hello world!' } }}export const schema = makeExecutableSchema({ typeDefs, resolvers})LaunchPad предоставляет отличный встроенный инструмент для употребления API:
И как я уже сказал, API публично доступен Таким образом, вам просто нужно войти в систему и сохранить вашу площадку.
Я сделал прокладку, которая подвергает свою конечную точку в https://kqwwkp0pr7.lp.gql.zone/graphql. Так что давайте попробуем это использовать Curl из командной строки:
$ curl \ -X POST \ -H "Content-Type: application/json" \ --data '{ "query": "{ hello }" }' \ https://kqwwkp0pr7.lp.gql.zone/graphqlкоторый успешно дает нам результат, который мы ожидаем:
{ "data": { "hello": "Hello world!" }}Запустите сервер GraphQL локально
Мы упомянули, что все, что вы создаете на LaunchPad, загружается, так что давайте продолжим.
Пакет состоит из двух файлов. Первый, schema.js это то, что мы имеем выше.
Второй, server.js , был невидим в LaunchPad, и это то, что предоставляет базовую функциональность сервера Apollo, питание от выражать популярный Node.js Framework.
Это не самый простой пример настройки сервера APOLLO, поэтому ради объяснения я собираюсь заменить его с более простым примером (но не стесняйтесь изучать, что после того, как вы поняли основы).
Ваш первый код сервера Apollo
Во-первых, беги Установка NPM и NPM начать На код LaunchPad вы скачали.
Сервер узла, который мы инициализировали Previally использует Номемон Чтобы перезапустить сервер при изменении файлов, поэтому при изменении кода сервер перезапускается с примененными изменениями.
Добавить этот код в server.js :
const express = require('express')const bodyParser = require('body-parser')const { graphqlExpress } = require('apollo-server-express')const { schema } = require('./schema')const server = express()server.use('/graphql', bodyParser.json(), graphqlExpress({ schema }))server.listen(3000, () => { console.log('GraphQL listening at http://localhost:3000/graphql')})С 11 линиями это намного проще Чем сервер настроен на LastPAD, потому что мы удалили все вещи, которые сделали этот код более гибким для их потребностей.
Кодирование заставляет вас принимать жесткие решения: насколько вам нужна гибкость? Насколько важно иметь чистый, понятный код, который вы можете забрать шесть месяцев с данный момент и легко настроить или передать другим разработчикам и членам команды, чтобы они могли быть продуктивными в течение всего времени по мере необходимости?
Вот что делает код:
Сначала мы импортируем несколько библиотек, которые мы собираемся использовать.
- Экспресс который будет способствовать базовой сетевой функциональности для выставления конечной точки
- BodyParser это узел тела разряда промежуточного программного обеспечения
- graphqlexpress это объект Apollo Server для Express
const express = require('express')const bodyParser = require('body-parser')const { graphqlExpress } = require('apollo-server-express')Далее мы импортируем Graphqlschema Объект, который мы создали в файле Schema.js выше, как Схема :
const { schema } = require('./schema')Вот несколько стандартных экспресс-набора, и мы просто инициализируем сервер на порту 3000.
const server = express()
Теперь мы готовы инициализировать сервер Apollo:
graphqlExpress({ schema })И мы передаем это в качестве обратного вызова до нашей конечной точки до HTTP JSON-запросов:
server.use('/graphql', bodyParser.json(), graphqlExpress({ schema }))Все, что нам нужно сейчас, это начать экспресс:
server.listen(3000, () => { console.log('GraphQL listening at http://localhost:3000/graphql')})Добавить конечную точку графики
Если вы используете Graphiql, вы можете легко добавить /gaphiql конечная точка, чтобы потреблять с GraphiQL интерактивный в браузере IDE :
server.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql', query: ``}))Теперь нам просто нужно запустить экспресс-сервер:
server.listen(PORT, () => { console.log('GraphQL listening at http://localhost:3000/graphql') console.log('GraphiQL listening at http://localhost:3000/graphiql')})Вы можете проверить его, используя Curl опять таки:
$ curl \ -X POST \ -H "Content-Type: application/json" \ --data '{ "query": "{ hello }" }' \ http://localhost:3000/graphqlЭто даст вам тот же результат, что и выше, где вы называете серверы LaunchPad:
{ "data": { "hello": "Hello world!" }}Оригинал: “https://www.freecodecamp.org/news/a-complete-introduction-to-apollo-the-graphql-toolkit-83acab4b8143/”