Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minify GraphQL query #1367

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Minify GraphQL query #1367

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions src/utils/graphqlClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,20 @@ import fetchUtil from './fetchUtil';

const fetch = fetchUtil('/graphql');

const minifyQuery = query =>
query
.replace(/\s?([{}()])\s?/g, '$1')
.replace(/\s+/g, ' ')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感覺他的套件要 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}

Copy link
Contributor

@mark86092 mark86092 Jun 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我用了另一條路徑，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 一個純文字，後續操作都不變

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@mark86092 mark86092 Jun 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

這個 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)

.trim();

const graphqlClient = ({ variables, query, options, token }) =>
fetch.post({ body: { query, variables }, token, options }).then(response => {
if (response.errors) {
throw new GraphqlError(response.errors);
}
return response.data;
});
fetch
.post({ body: { query: minifyQuery(query), variables }, token, options })
.then(response => {
if (response.errors) {
throw new GraphqlError(response.errors);
}
return response.data;
});

export default graphqlClient;