• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

banterfm/graphql-crunch: Reduces the size of GraphQL responses by consolidating ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

banterfm/graphql-crunch

开源软件地址(OpenSource Url):

https://github.com/banterfm/graphql-crunch

开源编程语言(OpenSource Language):

TypeScript 99.8%

开源软件介绍(OpenSource Introduction):

graphql-crunch

NPM version

Optimizes JSON responses by minimizing duplication and improving compressibility.

On Banter.fm, we see a 76% reduction in raw JSON size and a 30% reduction in gzip'd size. This leads to reduced transfer time and faster JSON parsing on mobile.

Client support

graphql-crunch is client agnostic and can be used anywhere that sends or receives JSON. We provide examples for integration with apollo-client as we use this in a GraphQL environment.

Installation

This library is distributed on npm. In order to add it as a dependency, run the following command:

$ npm install graphql-crunch --save

or with Yarn:

$ yarn add graphql-crunch

How does it work?

We flatten the object hierarchy into an array using a post-order traversal of the object graph. As we traverse we efficiently check if we've come across a value before, including arrays and objects, and replace it with a reference to it's earlier occurence if we've seen it. Values are only ever present in the array once.

Note: Crunching and uncrunching is an entirely lossless process. The final payload exactly matches the original.

Motivation

Large JSON blobs can be slow to parse on some mobile platforms, especially older Android phones, so we set out to improve that. At the same time we also wound up making the payloads more amenable to gzip compression too. GraphQL and REST-ful API responses tend to have a lot of duplication leading to huge payload sizes.

Example

In these examples, we use the SWAPI GraphQL demo.

Small Example

Using this query we'll fetch the first 2 people and their first 2 films and the first 2 characters in each of those films. We limit the connections to the first two items to keep the payload small:

{
  allPeople(first: 2) {
    people {
      name
      gender
      filmConnection(first: 2) {
        films {
          title
          characterConnection(first: 2) {
            characters {
              name
              gender
            }
          }
        }
      }
    }
  }
}

We get this response:

{
  "data": {
    "allPeople": {
      "people": [
        {
          "name": "Luke Skywalker",
          "gender": "male",
          "filmConnection": {
            "films": [
              {
                "title": "A New Hope",
                "characterConnection": {
                  "characters": [
                    {
                      "name": "Luke Skywalker",
                      "gender": "male"
                    },
                    {
                      "name": "C-3PO",
                      "gender": "n/a"
                    }
                  ]
                }
              },
              {
                "title": "The Empire Strikes Back",
                "characterConnection": {
                  "characters": [
                    {
                      "name": "Luke Skywalker",
                      "gender": "male"
                    },
                    {
                      "name": "C-3PO",
                      "gender": "n/a"
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          "name": "C-3PO",
          "gender": "n/a",
          "filmConnection": {
            "films": [
              {
                "title": "A New Hope",
                "characterConnection": {
                  "characters": [
                    {
                      "name": "Luke Skywalker",
                      "gender": "male"
                    },
                    {
                      "name": "C-3PO",
                      "gender": "n/a"
                    }
                  ]
                }
              },
              {
                "title": "The Empire Strikes Back",
                "characterConnection": {
                  "characters": [
                    {
                      "name": "Luke Skywalker",
                      "gender": "male"
                    },
                    {
                      "name": "C-3PO",
                      "gender": "n/a"
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  }
}

After we crunch it, we get:

{
  "data": [
    "male",
    "Luke Skywalker",
    { "gender": 0, "name": 1 },
    "n/a",
    "C-3PO",
    { "gender": 3, "name": 4 },
    [2, 5],
    { "characters": 6 },
    "A New Hope",
    { "characterConnection": 7, "title": 8 },
    "The Empire Strikes Back",
    { "characterConnection": 7, "title": 10 },
    [9, 11],
    { "films": 12 },
    { "filmConnection": 13, "gender": 0, "name": 1 },
    { "filmConnection": 13, "gender": 3, "name": 4 },
    [14, 15],
    { "people": 16 },
    { "allPeople": 17 }
  ]
}

The transformed payload is substantially smaller. After converting both payloads to JSON (with formatting removed), the transformed payload is 49% fewer bytes.

When the client receives this, we simply uncrunch it and get back the exact original version for the client to handle.

Large Example

In real-world scenarios, we'll have modularized our shcema with fragments and have as well as connections that have more than two items in them. Here's a query similar to the one above except we don't limit the size of the connections and we request a standard set of selections on Person objects.

{
  allPeople {
    people {
      ...PersonFragment
      filmConnection {
        films {
          ...FilmFragment
        }
      }
    }
  }
}

fragment PersonFragment on Person {
  name
  birthYear
  eyeColor
  gender
  hairColor
  height
  mass
  skinColor
  homeworld {
    name
    population
  }
}

fragment FilmFragment on Film {
  title
  characterConnection {
    characters {
      ...PersonFragment
    }
  }
}

The resulting response from this query is roughly 1MB of JSON (989,946 bytes), but with tons of duplication. Here is how crunching impacts the payload size:

Raw Crunched Improvement
Size 989,946B 28,220B 97.1%
GZip'd Size 22,240B 5,069B 77.2%

This is an admittedly extreme result, but highlights the potential for crunching payloads with large amounts of duplication.

Usage

Server-side

With apollo-server you can supply a custom formatResponse function. We use this to crunch the data field of the response before sending it over the wire.

import { ApolloServer } from "apollo-server";

const server = new ApolloServer({
  // schema, context, etc...
  formatResponse: (response) => {
    if (response.data) {
      response.data = crunch(response.data);
    }
    return response;
  },
});

server.listen({ port: 80 });

To maintain compatibility with clients that aren't expecting crunched payloads, we recommend conditioning the crunch on a query param, like so:

import url from "url";
import querystring from "querystring";
import { ApolloServer } from "apollo-server";

const server = new ApolloServer({
  // schema, context, etc...
  formatResponse: (response, options) => {
    const parsed = url.parse(options.context.request.url);
    const query = querystring.parse(parsed.query);

    if (query.crunch && response.data) {
      const version = parseInt(query.crunch) || 1;
      response.data = crunch(response.data, version);
    }

    return response;
  },
});

server.listen({ port: 80 });

Now only clients that opt-in to crunched payloads via the ?crunch=2 query parameter will receive them.

Your client can specify the version of the crunch format to use in the query parameter. If the version isn't specified, or an unknown version is supplied, we default to v1.0.

Client-side

On the client, we uncrunch the server response before the GraphQL client processes it.

With apollo-client, use a link configuration to setup an afterware, e.g.

import { ApolloClient } from 'apollo-client';
import { ApolloLink, concat } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { uncrunch } from 'graphql-crunch';

const http = new HttpLink({
  credentials: 'include',
  uri: '/api'
});

const uncruncher = new ApolloLink((operation, forward) =>
  forward(operation)
    .map((response) => {
      response.data = uncrunch(response.data);
      return response;
    });
);

const client = new ApolloClient({link: concat(uncruncher, http)});



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ardatan/graphql-toolkit: A set of utils for faster development of GraphQL tools发布时间:2022-07-10
下一篇:
apollographql/apollo-ios: 发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap