Полное вступление в Apollo, набор инструментов GraphQL

1656652940 polnoe vstuplenie v apollo nabor instrumentov graphql

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Знакомство с Аполлоном

За последние несколько лет GraphQL стал очень популярен как альтернативный подход к созданию API поверх REST.

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

Кроме того, это позволяет определять вложенные ресурсы, уменьшая время назад и обратно, иногда необходимое при работе с REST API.

Apollo – это команда и сообщество, которое разрабатывает GraphQL и предоставляет различные инструменты, которые помогают создавать проекты.

cZlluTAwxSbZXNG6wNJXed2IjdlURME1gg0r
Логотип Apollo предоставлен apollographql.com

В основном Apollo предлагает три инструмента: Клиент, Сервер, Двигатель.

Клиент Apollo помогает использовать GraphQL API с поддержкой самых популярных интерфейсных веб-технологий, таких как React, Vue, Angular, Ember и Meteor. Он также поддерживает нативную разработку на iOS и Android.

Сервер Apollo это серверная часть GraphQL, которая взаимодействует с серверной частью и посылает ответы на запросы клиента.

Двигатель Apollo это размещенная инфраструктура (SaaS), которая служит посредником между клиентом и вашим сервером, обеспечивая кэширование, отчеты о производительности, измерение нагрузки, отслеживание ошибок, статистику использования полей схемы, историческую статистику и многие другие преимущества. Пока он бесплатный, до 1 миллиона запросов в месяц, и это единственная часть Apollo, которая не является открытой и бесплатной. Он обеспечивает финансирование части проекта с открытым кодом.

Следует отметить, что эти три инструмента не связаны между собой, и вы можете использовать только клиент Apollo для взаимодействия с третьей частью API или, например, обслуживать API с помощью сервера Apollo, не имея клиента вообще.

Некоторые преимущества использования Apollo

Это все совместим со стандартной спецификацией GraphQLпоэтому у Apollo нет собственных или несовместимых технологий.

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

Apollo стремится быть простым в использовании и легким для участия.

Клиент Apollo и сервер Apollo – это проекты сообщества, созданные сообществом для сообщества. Apollo поддерживает Meteor Development Group (компания, стоящая за Meteor), очень популярную структуру JavaScript.

Аполлон сосредоточен на держать вещи простыми. Это ключ к успеху технологии, которая хочет стать популярной. Значительная часть имеющихся технологий, фреймворков или библиотек может оказаться чрезмерной для 99% малых и средних компаний и действительно подходит большим компаниям с очень сложными потребностями.

Клиент Apollo

Apollo Client является ведущим клиентом JavaScript для GraphQL. Поскольку он управляется сообществом, он разработан, чтобы позволить вам создавать компоненты пользовательского интерфейса, взаимодействующие с данными GraphQL — либо для отображения этих данных, либо для выполнения мутаций, когда происходят определенные действия.

Чтобы использовать Apollo Client, вам не нужно менять все в своей программе. Вы можете начать с одного крошечного слоя и одного запроса, а затем расширить его.

Больше всего Apollo Client разработан таким образом, чтобы быть простым, маленьким и гибким с самого начала.

В этой публикации я собираюсь подробно рассказать о процессе использования клиента Apollo в программе React.

Я буду использовать GitHub GraphQL API в качестве сервера.

Запустите приложение React

я использую create-react-app чтобы настроить программу React, которая очень удобна и только добавляет основные кости того, что нам нужно:

npx create-react-app myapp

npx – это команда, доступная в последних версиях npm. Обновите npm, если у вас нет этой команды.

Запустите локальный сервер программы с помощью

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(<App />, document.getElementById('root'))registerServiceWorker()

и удалить все это содержимое.

Начните работу с Apollo Boost

Apollo Boost – это самый простой способ начать использовать Apollo Client в новом проекте. Мы установим это в дополнение к 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 конечная точка на текущем хосте, поэтому давайте используем an Apollo Link чтобы указать детали подключения к серверу GraphQL, установив URI конечной точки GraphQL.

Apollo Link представлен HttpLink объект, из которого мы импортируем apollo-link-http.

Apollo Link дает нам способ описать, как мы хотим получить результат операции GraphQL и что мы хотим сделать с ответом.

Короче говоря, вы создаете несколько экземпляров Apollo Link, выполняющих один за другим запросы GraphQL, обеспечивая конечный результат, который вы хотите. Некоторые ссылки могут предоставить вам возможность повторной попытки запроса, если он не удался, пакетирование и многое другое.

Мы добавим ссылку Apollo к экземпляру клиента Apollo, чтобы использовать URI конечной точки GitHub GraphQL https://api.github.com/graphql

import { ApolloClient } from 'apollo-client'import { HttpLink } from 'apollo-link-http'const client = new ApolloClient({  link: new HttpLink({ uri: ' })})

Кэширование

Мы еще не кончили. Прежде чем иметь рабочий пример, мы также должны рассказать 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: ' }),  cache: new InMemoryCache()})

использование ApolloProvider

Теперь нам нужно подключить клиент Apollo к нашему дереву компонентов. Делаем это с помощью ApolloProviderзавернув наш компонент программы в главный файл React:

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: ' }),  cache: new InMemoryCache()})ReactDOM.render(  <ApolloProvider client={client}>    <App />  </ApolloProvider>,  document.getElementById('root'))

Этого достаточно для визуализации по умолчанию create-react-app экран с инициализированным клиентом Apollo:

He9moRbQxqfLHpSuSiBHDMXppwRq2CDhytKz

The gql тег шаблона

Теперь мы готовы что-то делать с клиентом Apollo, и собираемся получить некоторые данные из API GitHub и отобразить их.

Для этого нам нужно импортировать gql тег шаблона:

import gql from 'graphql-tag'

Любой запрос GraphQL будет создан с использованием этого тэга шаблона, вот так:

const query = gql`  query {    ...  }`

Выполните запрос GraphQL

gql являлся последним элементом, который нам нужен в нашем наборе инструментов.

Теперь мы готовы что-то делать с клиентом Apollo, и собираемся получить некоторые данные из API GitHub и отобразить их.

Получите маркер доступа для API

Первое, что нужно сделать это получить личный маркер доступа от GitHub.

GitHub облегчает это, предоставляя интерфейс, в котором вы можете выбрать любое разрешение, которое может потребоваться:

cZXXNubCl6sKWtoZRt90VupyIIEptCWfI2OD

Для этого учебного пособия вам не требуется ни одно из этих разрешений. Они предназначены для доступа к приватным данным пользователей, но мы будем запрашивать только данные общедоступных хранилищ.

Жетоном, который вы получаете, является an Маркер носителя 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"}

если что-то пошло не так.

Итак, нам нужно отправить Авторизация заголовок вместе с нашим запросом GraphQL, как мы делали в curl запрос выше.

Мы можем сделать это с помощью Apollo, создав промежуточное программное обеспечение Apollo Link. Начните с установки apollo-link-context:

npm install apollo-link-context

Этот пакет позволяет нам добавить механизм проверки подлинности, установив контекст наших запросов.

Мы можем использовать его в этом коде, ссылаясь на setContext функционировать следующим образом:

const authLink = setContext((_, { headers }) => {  const token = '***YOUR_TOKEN**'  return {    headers: {      ...headers,      authorization: `Bearer ${token}`    }  }})

и как только мы получим новый Apollo Link, мы сможем создать его с помощью 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: ' })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(  <ApolloProvider client={client}>    <App />  </ApolloProvider>,  document.getElementById('root'))

ПРЕДУПРЕЖДЕНИЕ ⚠️ ? Имейте в виду, что этот код является eпример для обучающих целей. Он открывает ваш GitHub GraphQL API для всего мира в вашем интерфейсном коде. Производственный код должен хранить этот маркер приватным.

Теперь мы можем сделать первый запрос GraphQL в нижней части этого файла, и этот пример запроса запрашивает названия и владельцев 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)

Успешный запуск этого кода возвращает результат нашего запроса в консоль браузера:

DPyIddPqoBytsvccGzq1K4n4PPGDaOOuwEtP

Показать набор результатов запроса 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 =>  <ul>    {props.data.loading ? '' : props.data.search.edges.map((row, i) =>      <li key={row.node.owner.login + '-' + row.node.name}>        {row.node.owner.login} / {row.node.name}: {' '}        <strong>          {row.node.stargazers.totalCount}        </strong>      </li&gt;    )}  </ul>)export default App

Вот результат нашего запроса, воспроизведенный в компоненте ?

bGd9-rLBDlC0LElJiyHIfPFsh206T5OXj3p0

Сервер Apollo

Задачей сервера GraphQL является принятие входящих запросов на конечной точке, интерпретация запросов и поиск каких-либо данных, необходимых для удовлетворения потребностей клиента.

Есть множество различных реализаций сервера GraphQL для всех возможных языков.

Сервер Apollo – это реализация сервера GraphQL для JavaScript, в частности для платформы Node.js.

Он поддерживает многие популярные фреймворки Node.js, в частности:

Сервер Apollo предоставляет нам три вещи:

  • Способ описания наших данных с помощью a схема.
  • Рамка для резольверыявляющиеся функциями, которые мы пишем для получения данных, необходимых для выполнения запроса.
  • Это облегчает транспортировку аутентификация для нашего API.

Чтобы изучить базы Apollo Server, мы не будем использовать ни одну из поддерживаемых структур Node.js. Вместо этого мы будем использовать что-то, созданное командой Apollo, действительно замечательное, что станет основой нашего обучения: Launchpad.

Стартовая площадка

Launchpad — это проект, являющийся частью зонта продуктов Apollo, и это довольно удивительный инструмент, позволяющий нам писать код в облаке и создавать сервер Apollo онлайн, так же, как мы запускаем фрагмент кода на Codepen, JSFiddle или JSBin.

За исключением того, что вместо того чтобы создавать визуальный инструмент, который будет изолирован там и предназначен просто как демонстрация или как инструмент обучения, с Launchpad мы создаем GraphQL API. Он будет общедоступным.

Каждый проект на Launchpad вызывается колодка и имеет URL-адрес конечной точки GraphQL, например:

https://1jzxrj129.lp.gql.zone/graphql

Как только вы создадите панель, Launchpad предоставит вам возможность загрузить полный код программы Node.js, которая ее запускает, и вам просто нужно запустить npm install и npm start иметь локальную копию сервера Apollo GraphQL.

Подводя итог, это а отличный инструмент для изучения, распространения и создания прототипа.

Сервер Apollo Hello World

Каждый раз, когда вы создаете новую панель запуска колодка, вам будет предложено Hello, World! сервера Apollo. Давайте погрузимся в это.

Сначала вы импортируете makeExecutableSchema функция от graphql-tools.

import { makeExecutableSchema } from 'graphql-tools'

Эта функция используется для создания a GraphQLSchema объект, придавая ему определение схемы (написанное на языке схем GraphQL) и набор резольверы.

Определение схемы — это строка буквы шаблона, содержащая описание нашего запроса и типы, связанные с каждым полем:

const typeDefs = `  type Query {    hello: String  }`

А решатель это объект, отображающий поля в схеме на функции разрешителя. Он может искать данные для ответа на запрос.

Вот простой резольвер, содержащий функцию резольвера для hello поле, которое просто возвращает Hello world! строка:

const resolvers = {  Query: {    hello: (root, args, context) => {      return 'Hello world!'    }  }}

Учитывая эти два элемента, определение схемы и резольвер, мы используем makeExecutableSchema функцию, которую мы импортировали раньше, чтобы получить a GraphQLSchema объект, который мы назначаем к schema конст.

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:

QFNQVQsPIXbZX3leOK84JiPVPV0o228Z-pDh

И, как я уже говорил ранее, 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 Server на базе Express, популярного фреймворка Node.js.

Это не самый простой пример настройки сервера Apollo, поэтому для объяснения я собираюсь заменить его более простым примером (но не стесняйтесь учить его после того, как вы поймете основы).

Ваш первый код сервера Apollo

Во-первых, бегите npm install и npm start в коде Launchpad, который вы скачали.

Сервер узлов, который мы инициализировали ранее, использует nodemon для перезапуска сервера, когда файлы изменяются, поэтому при изменении кода сервер перезапускается с применением ваших изменений.

Добавьте этот код 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 })

Это всего 11 строк гораздо проще чем сервер, настроенный Launchpad, потому что мы удалили все, что делало код более гибким для их нужд.

Кодировка заставляет вас принимать трудные решения: сколько гибкости вам сейчас нужно? Как важно иметь чистый, понятный код, который вы можете подобрать через шесть месяцев и легко настроить или передать другим разработчикам и членам команды, чтобы они могли быть производительными за короткое время?

Вот что делает код:

Сначала мы импортируем несколько библиотек, которые мы собираемся использовать.

  • express который обеспечит базовую сетевую функциональность, чтобы открыть конечную точку
  • bodyParser это промежуточное программное обеспечение анализа тела узла
  • graphqlExpress это объект Apollo Server для Express
const express = require('express')const bodyParser = require('body-parser')const { graphqlExpress } = require('apollo-server-express')

Дальше мы импортируем GraphQLSchema объект, который мы создали в файле schema.js выше Schema:

const { schema } = require('./schema')

Вот некоторый стандартный набор Express, и мы просто инициализируем сервер на порту 3000

const server = express()

Теперь мы готовы инициализировать Apollo Server:

graphqlExpress({ schema })

и мы передаем это как обратный вызов нашей конечной точке к запросам HTTP JSON:

server.use('/graphql', bodyParser.json(), graphqlExpress({ schema }))

Все, что нам сейчас нужно, это запустить Express:

server.listen(3000, () => {  console.log('GraphQL listening at })

Добавьте конечную точку GraphiQL

Если вы используете GraphiQL, вы можете легко добавить a /graphiql конечная точка для использования с интерактивной средой IDE GraphiQL в обозревателе:

server.use('/graphiql', graphiqlExpress({  endpointURL: '/graphql',  query: ``}))

Теперь нам просто нужно запустить сервер Express:

server.listen(PORT, () => {  console.log('GraphQL listening at   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!"  }}

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *