Сохраненные запросы GraphQL с использованием запросов GET.

Архив Bezdepbonusu710.10.20226 мин чтения

Это часть 1, вы также можете найти часть 2 здесь или часть 3 здесь.

Недавно мы решили обновить один из наших микросервисов с помощью GraphQL. Приложение находится между нашим новым мобильным веб-клиентом и нашим сервисом Discovery API. Цель приложения - моделировать наши данные и повышать производительность за счет управления количеством обращений к сервису, которые клиент должен сделать во внешнем интерфейсе. Мы используем пограничное кэширование, чтобы избежать ненужных обращений к серверу, позволяя перехватывать запросы и раньше возвращать их из памяти. Мы были хорошо осведомлены о запросах, которые клиент будет отправлять заранее, поэтому мы также хотели использовать сохраненные запросы GraphQL в попытке сэкономить полосу пропускания между клиентом и сервером. Поскольку GraphQL отправляет запросы POST в одну конечную точку, кэширование на границе становится затруднительным. Здесь нам может помочь запрос GET. В этом руководстве мы создадим сервер GraphQL, который принимает запросы GET для постоянных запросов.

ОБНОВЛЕНИЕ: мир технологий быстро развивается. Эта серия руководств начинается с Apollo Server 1.3.2, но не беспокойтесь, в третьей части мы рассмотрим Apollo Server 2 и весь процесс миграции. А пока, если у вас возникнут какие-либо проблемы, вы можете скачать исходные файлы проекта здесь: исходные файлы.

Для начала создайте рабочий каталог и установите следующие пакеты с помощью npm.

npm init -y &&
npm install --save graphql graphql-tools apollo-server-express express graphql-playground-middleware-express body-parser ramda

Нам потребуется создать файл схемы и файл преобразователей.

touch schemas.js resolvers.js

schemas.js

const Greeting = `
  type Greeting {
    name: String
    text: String
  }
`
const Query = `
  type Query {
    greeting(name: String): Greeting
  }
`
module.exports = [Greeting, Query]

resolvers.js

const resolvers = {
  Query: {
    greeting: (_, { name }) => ({
      name,
      text: 'How are you today?'
    })
  }
}
module.exports = resolvers

Далее нам нужно создать извлеченный файл запросов. Это будет использоваться в качестве хэш-карты для клиента. Вместо того, чтобы отправлять весь документ запроса, мы позволим клиенту отправлять параметры запроса. Параметры запроса будут содержать ключ, называемый хешем, значение которого будет соответствовать ключу в нашем извлеченном файле запросов. Другими словами, вместо того, чтобы заказывать гамбургер, картофель фри и напиток, наш клиент просто заказывает номер 1. { hash: 1 }

touch extracted_queries.js

Внутри файла extract_queries.js мы экспортируем объект. Ключом будет хэш (в нашем случае простое целое число), а значением будет желаемый запрос.

extract_queries.js

module.exports = {
 1: `query Greeting($name: String!) {
      greeting(name: $name) {
       name
       text
      }
    }`
}

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

touch persistedQueries.js

Если хеш существует, мы получим соответствующий ключ в нашем извлеченном файле запросов. Если его нет, мы отправим запрос без изменений.

persistedQueries.js

const { omit } = require('ramda')
const queryMap = require('./extracted_queries.js')
const persistedQueries = (req, res, next) => {
  const { hash = '' } = req.query

  if (!hash) return next()
  const query = queryMap[hash]

  if (!query) {
    res.status(400).json({ error: [{}] })
    return next(new Error('Invalid query hash'))
  }
  req.query = {
    query,
    variables: omit(['hash'], req.query)
  }
  next()
}
module.exports = persistedQueries

В функции persistedQueries мы начинаем с деструктуризации хэш-свойства объекта req.query, устанавливая в качестве значения по умолчанию пустую строку. Затем мы проверяем истинное значение в хэш-опоре, если она не указана, мы просто возвращаем next(), отправляя запрос следующей следующей функции промежуточного программного обеспечения.

Если хэш существует, мы используем его для сопоставления с нашим извлеченным файлом запросов. Мы переназначаем объекту req.query соответствующий запрос и используем метод omit ramda, чтобы удалить хеш-ключ перед вызовом next(), отправив запрос по пути. Если совпадения не существует, мы возвращаем статус 400 и вызываем next(...), передавая сообщение об ошибке, которое позже будет зарегистрировано и просмотрено. Теперь все, что нам нужно сделать, это создать файл server.js, чтобы связать все это вместе.

touch server.js

server.js

const express = require('express')
const bodyParser = require('body-parser')
const playground = require('graphql-playground-middleware-express').default
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express')
const { makeExecutableSchema } = require('graphql-tools')
const persistedQueries = require('./persistedQueries')
const typeDefs = require('./schemas')
const resolvers = require('./resolvers')
const port = 4000
const app = express()
const schema = makeExecutableSchema({ typeDefs, resolvers })
app.use(
  '/graphql',
  bodyParser.json(),
  persistedQueries,
  graphqlExpress({ schema })
)
app.use(
  '/playground',
  playground({ endpoint: '/graphql' })
)
app.listen(port, () => console.log(`listening on port: ${port}`))

Мы создаем простое экспресс-приложение и объединяем наши typeDefs и резолверы с помощью функции makeExecutableSchema graphql-tools. Мы используем express app.use method для объявления промежуточного программного обеспечения на основе маршрута. Первый аргумент - это строка, содержащая желаемый маршрут /graphql. Чтобы поддерживать обратную совместимость, мы передаем промежуточное ПО body-parser, которое нам понадобится для любых запросов POST, которые может получить сервер. Затем мы передаем наше persistedQueriesmiddleware, которое будет вносить изменения в запрос, только если обнаружит хэш в параметрах req.query. Последний параметр - это промежуточное ПО graphqlExpress от apollo-server-express. Это принимает объект с объединенными результатами нашего makeExecutableSchema вызова выше.

Также мы создаем маршрут для GraphQL в браузерной IDE GraphQL Playground. Мы будем использовать это для тестирования наших маршрутов POST, чтобы убедиться, что мы не нарушили функциональность сервера GraphQL по умолчанию.

Теперь давайте запустим сервер с помощью следующей команды.

node server.js

Если вы видите сообщение listening on port: 4000 в терминале, значит, все готово. Откройте браузер и перейдите к http://localhost:4000/playground.. Вы должны увидеть среду IDE graphql-playsky. Скопируйте и вставьте запрос из нашего извлеченного файла запросов в graphql-Playground и запустите запрос, щелкнув значок воспроизведения. Не забудьте добавить переменную name в раздел переменных внизу, вот так...

Если все сделано правильно, вы должны увидеть результаты своего запроса в виде ответа JSON.

{
  "data": {
    "greeting": {
      "name": "Ticketmaster",
      "text": "How are you today?"
    }
  }
}

Теперь откройте новую вкладку в браузере и перейдите к http://localhost:4000/graphql?hash=1&name=Ticketmaster.. Вы должны увидеть тот же ответ JSON, что и на предыдущей вкладке, но на этот раз мы используем параметры запроса, а не отправляем на сервер весь документ запроса.