{"id":13451854,"url":"https://github.com/Houfeng/gq-loader","last_synced_at":"2025-03-23T19:32:49.762Z","repository":{"id":148031220,"uuid":"119284100","full_name":"Houfeng/gq-loader","owner":"Houfeng","description":"The best GraphQL Loader for Webpack","archived":false,"fork":false,"pushed_at":"2019-04-22T01:25:35.000Z","size":16,"stargazers_count":59,"open_issues_count":3,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T11:36:23.065Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Houfeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-28T18:05:48.000Z","updated_at":"2024-01-05T08:22:25.000Z","dependencies_parsed_at":"2023-05-28T06:30:26.490Z","dependency_job_id":null,"html_url":"https://github.com/Houfeng/gq-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Fgq-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Fgq-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Fgq-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Fgq-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Houfeng","download_url":"https://codeload.github.com/Houfeng/gq-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245158395,"owners_count":20570177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:01:04.832Z","updated_at":"2025-03-23T19:32:49.463Z","avatar_url":"https://github.com/Houfeng.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# graphql-auto-loader\n\n# The best GraphQL Loader for Webpack\n\nGraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余。\n\n想更多的了解或使用 GraphQL，请访问 https://github.com/facebook/graphql\n\nGraphQL 有针对不同语言的服务端实现，以帮助开发人员搭建 `GraphQL Server`。\n\n而 `gq-loader` 是一个 `webpack` 插件，你可以认为它一针对前端项目的一种 `client` 端实现，它的目的是帮助前端开发同学更简便的调用 GraphQL API，它让前端开发人员在使用 GraphQL 时更加方便，像普通 `js` 模块一样轻松自如，使前端开发人员能在 `js` 文件中通过 `import` 或 `require` 导入 `.gql` 和 `.graphql` 文件，然后直接调用。 并且它还支持通过 `#import` 语法导入其它 `.gql` 文件，比如 fragments。\n\n\u003e `#import` 还提供了两个别名，分别是 `#require` 和 `#include`，这两个别名和 `#import` 的用法及行为完全一致。\n\n## 安装\n\n```\nnpm install gq-loader --save-dev\n```\n\n或者\n\n```\nyarn add gq-loader\n```\n\n## 基本使用\n\n如同其它 loader 一样，首先，我们在 `webpack.config.js` 中添加 `gq-loader` 的配置\n\n```js\n{\n  test: /\\.(graphql|gql)$/,\n  exclude: /node_modules/,\n  use: {\n    loader: 'gq-loader'\n    options: {\n      url: 'Graphql Server URL'\n    }\n  }\n}\n```\n\n然后，我们就可以在 `js` 文件中通过 `import` 来导入 `.gql` 文件使用它了，我们来一个简单的示例，假设已经有一个可以工作的 `Graphql Server`，那么，我们先创建一个用户的 `user.gql`\n\n```graphql\n#import './fragment.gql' \n\nquery get($name: String) {\n  getUser(name: $name)\n    ...userFields\n  }\n}\n\nmutation update($form: User) {\n  updateUser(input: $form) {\n    ...userFields\n  }\n}\n```\n可以看到，我们通过 `#import` 引用了另外一个 `.gql` 文件 `fragment.gql`，在这个文件中我们描述了要返回的 user 的字段信息，这样我们就能在不同的地方「重用」它了，我们也创建一下这个文件\n\n```gql\nfragment userFields on User {\n  name\n  age\n}\n```\n\n好了，我们可以在 `js` 文件中直接导入 `user.gql`，并且使用它查询用户了，从未如此简便，我们来看看\n\n```js\nimport user from './user.gql';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nasync function query() {\n  const userdata = await user.get({ name: 'bob' });\n  console.log('user', userdata);\n}\n\nasync function update() {\n  const userdata = await user.update({ form: { age: 25 } })\n  console.log('after user', userdata);\n}\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={query}\u003equery\u003c/button\u003e;\n      \u003cbutton onClick={update}\u003eupdate\u003c/button\u003e;\n    \u003c/div\u003e\n  )\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n在调用 `user.get` 时，我们可以通过函数参数向 `GraphQL` 传递变量，这些变量就是我们的查询参数。\n\n## 自定义请求\n\n默认 `gq-loader` 就会帮你完成 `graphql 请求`，但某些场景下或许你想自已控制所有请求，如果有这样需要，我们还可以通过 `request` 属性来「自定义」请求，看一下示例，需要先稍微改动一下 `loader 配置`\n\n```js\n{\n  test: /\\.(graphql|gql)$/,\n  exclude: /node_modules/,\n  use: {\n    loader: 'gq-loader'\n    options: {\n      url: 'Graphql Server URL',\n      //指定自动请求模块路径\n      request: path.resolve('your_request_module_path');\n    }\n  }\n}\n```\n在 `your_request_module_path` 填写自定义请求模块路径，`gq-loader` 将自动加载并使用对应请求模块，模块只需要改出一个「请求函数即可」，看如下自定义示例\n\n```js\nconst $ = require('jquery');\n\n//url 是要请求的 GraphQL 服务地址\n//data 是待发送的数据\n//options 是自定义选项\nmodule.exports = function(url, data, options){\n  //如果有需要还可以处理 options\n  return $.post(url, data);\n};\n```\n\n其中，`options` 是导入 `.gql` 文件后「函数的第二个参数」，比如，可以这样传递 `options` 参数\n\n```js\nimport user from './user.gql';\n\nasync function query() {\n  const options = {...};\n  const user = await user.get({ name: 'bob' }, options);\n  console.log('user', user);\n}\n```\n\n## 完整选项\n\n| 名称 | 说明 | 默认值 |\n| ---- | ------- | ----------- |\n| URL |指定 graphql 服务 URL | /graphql |\n| request | 自定义请求函数 | 使用内建模块 |\n| extensions | 默认扩展名，在导入时省略扩展名时将按配置依次查找 | .gql/.graphql |\n| string | 指定导入模式，当为 true 时导入为字符串，而不是可执行的函数，已自动修复 fragment 重复和依赖问题 | false |\n\n\n注意，`gq-loader` 的 `extensions` 无论配置何值，在 `js` 中 `import` 时都不能省略扩展名，此选项仅作用于 `.gql` 文件 `import` 其它 `.gql` 文件","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHoufeng%2Fgq-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHoufeng%2Fgq-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHoufeng%2Fgq-loader/lists"}