Transport minified version of query.

[phryneas]

Right now, we transport the AST of a query over the network.

That's not optimal:

Normal Query:

  query dynamicProducts {
    products {
      id
      title
      foo {
        bar {
          baz {
            yoink
          }
        }
      }
    }
  }

is instead transported as

{
  "kind": "Document",
  "definitions": [
    {
      "kind": "OperationDefinition",
      "operation": "query",
      "name": {
        "kind": "Name",
        "value": "dynamicProducts"
      },
      "variableDefinitions": [],
      "directives": [],
      "selectionSet": {
        "kind": "SelectionSet",
        "selections": [
          {
            "kind": "Field",
            "name": {
              "kind": "Name",
              "value": "products"
            },
            "arguments": [],
            "directives": [],
            "selectionSet": {
              "kind": "SelectionSet",
              "selections": [
                {
                  "kind": "Field",
                  "name": {
                    "kind": "Name",
                    "value": "id"
                  },
                  "arguments": [],
                  "directives": []
                },
                {
                  "kind": "Field",
                  "name": {
                    "kind": "Name",
                    "value": "title"
                  },
                  "arguments": [],
                  "directives": []
                },
                {
                  "kind": "Field",
                  "name": {
                    "kind": "Name",
                    "value": "foo"
                  },
                  "arguments": [],
                  "directives": [],
                  "selectionSet": {
                    "kind": "SelectionSet",
                    "selections": [
                      {
                        "kind": "Field",
                        "name": {
                          "kind": "Name",
                          "value": "bar"
                        },
                        "arguments": [],
                        "directives": [],
                        "selectionSet": {
                          "kind": "SelectionSet",
                          "selections": [
                            {
                              "kind": "Field",
                              "name": {
                                "kind": "Name",
                                "value": "baz"
                              },
                              "arguments": [],
                              "directives": [],
                              "selectionSet": {
                                "kind": "SelectionSet",
                                "selections": [
                                  {
                                    "kind": "Field",
                                    "name": {
                                      "kind": "Name",
                                      "value": "yoink"
                                    },
                                    "arguments": [],
                                    "directives": []
                                  }
                                ]
                              }
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ],
  "loc": {
    "start": 0,
    "end": 163
  }
}

and instead we could go smaller and transport

query dynamicProducts{products{id title foo{bar{baz{yoink}}}}}

[relativeci]

Job #133: Bundle Size — 1.01MiB (~+0.01%).

e38de2b(current) vs 1f8cda5 main#115(baseline)

Warning

Bundle contains 1 duplicate package – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current Job #133	Baseline Job #115
Initial JS	890.63KiB(~+0.01%)	890.58KiB
Initial CSS	0B	0B
Cache Invalidation	1.5%	0%
Chunks	24	24
Assets	45	45
Modules	512	512
Duplicate Modules	30	30
Duplicate Code	1.29%	1.29%
Packages	29	29
Duplicate Packages	1	1

Bundle size by type   1 change 1 regression

	Current Job #133	Baseline Job #115
JS	1023.89KiB (~+0.01%)	1023.84KiB
Other	5.99KiB	5.99KiB

---

View job #133 report View pr/transport-minified-queries branch activity View project dashboard

[jerelmiller]

It looks like graphql has a stripIgnoredCharacters utility that handles this. Can we use that function to handle stripping the whitespace? It looks like that utility is lexer-aware so it should be a bit more accurate.

[phryneas]

Hmm, that pulls in about 10kb more bundle size - but since we're in SSR world here, that should be okay.
We might at some point get to the point that we pull in too much for edge functions, though (they have a limit of 1MB I believe?), so I'll make a note that that's a great place for a future size optimization.

[phryneas]

Hmm, that pulls in about 10kb more bundle size - but since we're in SSR world here, that should be okay.
We might at some point get to the point that we pull in too much for edge functions, though (they have a limit of 1MB I believe?), so I'll make a note that that's a great place for a future size optimization.

[phryneas]

Ah forget about it, most of that is included in gql already, so it's likely fine anyways.

[jerelmiller]

My only request would be to use stripIgnoredCharacters, but otherwise this looks great!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
apollo-client-nextjs-experimental-nextjs-app-support	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2024 10:51am