Minify GraphQL query

[peteranny]

Close #1353

這個 PR 是？

減少 graphQL 的空白字元

我應該如何手動測試？

• http://localhost:3000/ 網頁資料正常顯示，表示 API 仍然成功

[mark86092]

有機會看看 PR 前後的 requests 資料量比較嗎？

[peteranny]

以首頁來說的話，每個 api 傳輸大小差個 0.02k 左右

Before	After

[mark86092]

看起來大概是 20B，感覺差別不大

那這樣我可能會想，這幾段 regular expression 會不會有意外的 replace 狀況是我們沒想到的

[peteranny]

或者我們也可以用別人寫好的來做，只是怕會不會覺得不想要那麼多套件

[mark86092]

感覺他的套件要 server 端配合><" 不過看到他推薦的這個也蠻有趣的：https://www.apollographql.com/docs/apollo-server/performance/apq/
不只減少傳輸量，還允許 CDN 把結果 cache (這題再說ＸＤ)

想問 .replace(/\s?([{}()])\s?/g, '$1') 這段要怎麼理解？

[peteranny]

感覺他的套件要 server 端配合><" 不過看到他推薦的這個也蠻有趣的：https://www.apollographql.com/docs/apollo-server/performance/apq/ 不只減少傳輸量，還允許 CDN 把結果 cache (這題再說ＸＤ)

我沒發現他這個還包含代換 token ORZ
那這裡有個應該是單純 minify 的：https://github.com/drwpow/gqlmin

想問 .replace(/\s?([{}()])\s?/g, '$1') 這段要怎麼理解？

只是把 query(name: $name) { name } 變成 query(name: $name){name}

[mark86092]

我用了另一條路徑，https://github.com/goodjoblife/GoodJobShare/compare/gqlmin

如果 graphql 可以 minify --> 那是不是我們 bundle (compile) 的時候就可以 minify

嘗試了這樣：

1. 將 graphql 放到 .gql 的文件
2. 改用 import xxx from 'xxx.gql'

原理：

當 webpack 遇到 *.gql(test: /\.(graphql|gql)$/,) 的時候，
用 './graphql-loader.js' 去處理，

i.e. 把 *.gql 的內容，透過 gqlmin 處理，並回傳成 js code

基本上

mutation($input: FacebookLoginInput!) {
  facebookLogin(input: $input) {
    user {
      _id
      facebook_id
    }
    token
  }
}

會變成

export default "mutation($input:FacebookLoginInput!){facebookLogin(input:$input){user{_id facebook_id}token}}";

所以 `import facebookLogin from './facebookLogin.gql'，就會像是 import 一個純文字，後續操作都不變

[peteranny]

或者這裡有個現成的 minify-graphql-loader 看可不可以直接套用

[mark86092]

這個 package 我發現太久以前了，他宣稱

It must to be used in chain with a GraphQL loader:

但現在的 graphql-tag/loader 在 apollo 會將 *.graphql 的文字解析成 AST
但 minify-graphql-loader 還在假設 graphql-tag/loader 只是幫忙處理 #import 的關鍵字

所以，這個 package 會產生不預期的 minify 結果

(我設定的結果：master...minify-graphql-loader)