Graphql-minify NPM

graphql-minify

Before

{
  person(personID: 4) {
    name
    gender
    homeworld {
      name
    }
  }
}

After

{cT(cV:4){cHcgcn{cH}}}

Motivation

Most CDNs only cache GET requests
Some browsers limit GET requests to 2047 charachters
Some GraphQL queries are cacheable in theory, but exceed this limit

psst! You can probably achieve even better results with Automatic Persisted Queries

Install

npm install --save graphql-minify

Usage

import introspectGraphQL from 'graphql-minify/introspect'
import {
  getUniqueNamesFromIntrospection,
  getUniqueNamesFromGQL,
  minifyQuery,
  expandQuery
} from 'graphql-minify'

const schema = await introspectGraphQL('http://localhost:3000/graphql')
const uniqueNames = getUniqueNamesFromIntrospection(schema)

const query = gql`
  query {
    person(personID: 4) {
      name
    }
  }
`

const minified = minifyQuery(query, uniqueNames)
const expanded = expandQuery(minified, uniqueNames) // restore the original query

Your full solution could involve adding uniqueNames to your bundle, or making uniqueNames available via an API endpoint

An Express.js integration might look something like:

app.use('/graphql/unique-names', (req, res) => {
  res.json(uniqueNames)
})

app.use('/graphql', (req, res, next) => {
  req.body.query = expandQuery(req.body.query, uniqueNames)
  next()
})

app.use('/graphql', handleGraphQL)