graphql.macro 项目教程

graphql.macro 项目教程

1. 项目的目录结构及介绍

graphql.macro 项目的目录结构如下：

graphql.macro/
├── examples/
│   └── basic/
│       ├── src/
│       │   └── index.js
│       ├── .babelrc
│       ├── .gitignore
│       ├── yarn.clean
│       ├── LICENSE
│       ├── README.md
│       ├── package.json
│       └── yarn.lock
├── .babelrc
├── .gitignore
├── .yarn.clean
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

目录结构介绍

• examples/: 包含示例项目的目录。
  • basic/: 基本的示例项目。
    • src/: 示例项目的源代码目录。
    • .babelrc: Babel 配置文件。
    • .gitignore: Git 忽略文件配置。
    • yarn.clean: Yarn 清理配置文件。
    • LICENSE: 项目许可证。
    • README.md: 项目说明文档。
    • package.json: 项目依赖配置文件。
    • yarn.lock: Yarn 锁定文件。
• .babelrc: 主项目的 Babel 配置文件。
• .gitignore: 主项目的 Git 忽略文件配置。
• .yarn.clean: 主项目的 Yarn 清理配置文件。
• LICENSE: 主项目的许可证。
• README.md: 主项目的说明文档。
• package.json: 主项目的依赖配置文件。
• yarn.lock: 主项目的 Yarn 锁定文件。

2. 项目的启动文件介绍

在 examples/basic/src/ 目录下，有一个 index.js 文件，这是示例项目的启动文件。该文件展示了如何使用 graphql.macro 来处理 GraphQL 查询。

// examples/basic/src/index.js
import gql from 'graphql.macro';

const query = gql`
  query {
    hello {
      world
    }
  }
`;

console.log(query);

启动文件介绍

• index.js: 导入 graphql.macro 并使用 gql 宏来定义一个 GraphQL 查询。该查询会被编译成一个 GraphQL AST 对象。

3. 项目的配置文件介绍

.babelrc

在项目的根目录和 examples/basic/ 目录下都有一个 .babelrc 文件，用于配置 Babel 编译器。

{
  "plugins": ["graphql.macro"]
}

package.json

在项目的根目录和 examples/basic/ 目录下都有一个 package.json 文件，用于配置项目的依赖和脚本。

{
  "name": "graphql.macro",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "babel-node src/index.js"
  },
  "dependencies": {
    "graphql.macro": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.0.0"
  }
}

配置文件介绍

• .babelrc: 配置 Babel 插件，启用 graphql.macro 宏。
• package.json: 定义项目的基本信息、依赖和脚本。start 脚本用于启动示例项目。

以上是 graphql.macro 项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。