GraphQL

Parcel 支持通过 @parcel/transformer-graphql 插件将单独文件中定义的 GraphQL 查询导入到 JavaScript 中。当检测到 .graphql 或 .gql 文件时，它将自动安装到你的项目中。

¥Parcel supports importing GraphQL queries defined in a separate file into JavaScript via the @parcel/transformer-graphql plugin. When a .graphql or .gql file is detected, it will be installed into your project automatically.

用法示例

¥Example usage

GraphQL 文件作为字符串导入到 JavaScript 中，你可以将其直接发送到服务器或与你喜欢的任何 GraphQL 库一起使用。

¥GraphQL files are imported into JavaScript as a string, which you can send to a server directly or use with whatever GraphQL library you like.

app.js:

import query from './query.graphql';

query.graphql:

{
  user(id: 5) {
    firstName,
    lastName
  }
}

依赖

¥Dependencies

Parcel 还支持使用特殊的注释语法将单独文件中定义的片段导入到另一个 GraphQL 文件中。这些将被打包到一个 GraphQL 查询中，并作为字符串返回到你的代码。

¥Parcel also supports importing fragments defined in separate files into another GraphQL file using a special comment syntax. These will be bundled together into a single GraphQL query and returned to your code as a string.

你可以从文件导入所有片段：

¥You can either import all fragments from a file:

# import "fragments.graphql"
# import * from "fragments.graphql"

或列出你要导入的特定片段：

¥or list the specific fragments you wish to import:

# import UserFragment, AddressFragment from "fragments.graphql"

下面是一个完整的示例，展示了如何使用导入作为更大的 GraphQL 查询的一部分：

¥Here is a full example showing how to use imports as part of a larger GraphQL query:

query.graphql:

# import UserFragment from "user.graphql"
# import "address.graphql"

query UserQuery($id: ID) {
  user(id: $id) {
    ...UserFragment
    address {
      ...AddressFragment
    }
  }
}

user.graphql:

fragment UserFragment on User {
  firstName
  lastName
}

address.graphql:

fragment AddressFragment on Address {
  city
  state
  country
}