The best GraphQL Loader for Webpack

GraphQL 既是一種用于 API 的查詢語言也是一個滿足你資料查詢的運作時。 GraphQL 對你的 API 中的資料提供了一套易于了解的完整描述，使得用戶端能夠準确地獲得它需要的資料，而且沒有任何備援。

GraphQL 有針對不同語言的服務端實作，以幫助開發人員搭建 <code>GraphQL Server</code>。

而 <code>gq-loader</code> 是一個 <code>webpack</code> 插件，你可以認為它一針對前端項目的一種 <code>client</code> 端實作，它的目的是幫助前端開發同學更簡便的調用 GraphQL API，它讓前端開發人員在使用 GraphQL 時更加友善，像普通 <code>js</code> 子產品一樣輕松自如，使前端開發人員能在 <code>js</code> 檔案中通過 <code>import</code> 或 <code>require</code> 導入 <code>.gql</code> 和 <code>.graphql</code> 檔案，然後直接調用。 并且它還支援通過 <code>#import</code> 文法導入其它 <code>.gql</code> 檔案，比如 fragments。

<code>#import</code> 還提供了兩個别名，分别是 <code>#require</code> 和 <code>#include</code>，這兩個别名和 <code>#import</code> 的用法及行為完全一緻。

或者

如同其它類的的 loader 一樣，首先，我們在 <code>webpack.config.js</code> 中添加 <code>gq-loader</code> 的配置

然後，我們就可以在 <code>js</code> 檔案中通過 <code>import</code> 來導入 <code>.gql</code> 檔案使用它了，我們來一個簡單的示例，假設已經有一個可以工作的 <code>Graphql Server</code>，那麼，我們先建立一個可以查詢使用者的 <code>getUser.gql</code>

可以看到，我們通過 <code>#import</code> 引用了另外一個 <code>.gql</code> 檔案 <code>fragment.gql</code>，在這個檔案中我們描術了要傳回的 user 的字段資訊，這樣我們就能在不同的地方「重用」它了，我們也建立一下這個檔案

好了，我們可以在 <code>js</code> 檔案中直接導入 <code>getUser.gql</code>，并且使用它查詢使用者了，從未如此簡便，我們來看看

在調用 <code>getUser</code> 時，我們可以通過參數，向 <code>GraphQL</code> 傳遞變量，這些變量就是我們的查詢參數。

預設 <code>gq-loader</code> 就會幫你完成 <code>graphql 請求</code>，但某些場景下或許你想自已控制所有請求，如果有這樣需要，我們還可以通過 <code>request</code> 屬性來「自定義」請求，看一下示例，需要先稍微改動一下 <code>loader 配置</code>

在 <code>your_request_module_path</code> 填寫自定義請求子產品路徑，<code>gq-loader</code> 将自動加載并使用對應請求子產品，子產品隻需要改出一個「請求函數即可」，看如下自定義示例

其中，<code>options</code> 是導入 <code>.gql</code> 檔案後「函數的第二個參數」，比如，可以這樣傳遞 <code>options</code> 參數

名稱

說明

預設值

URL

指定 graphql 服務 URL

/graphql

request

自定義請求函數

使用内模組化塊

extensions

預設擴充名，在導入時省略擴充名時将按配置依次查找

.gql/.graphql

string

指定導入模式，當為 true 時導入為字元串，而不是可執行的函數

false

注意，<code>gq-loader</code> 的 <code>extensions</code> 無論配置何值，在 <code>js</code> 中 <code>import</code> 時都不能省略擴充名，此選項僅作用于 <code>.gql</code> 檔案 <code>import</code> 其它 <code>.gql</code> 檔案