如何在angular 12中导入默认导出的graphql查询？

在Angular 12中导入默认导出的GraphQL查询可以按照以下步骤进行：

1. 首先，确保你已经安装了所需的依赖。在Angular项目的根目录下，运行以下命令来安装graphql和@graphql-codegen/cli：

npm install graphql @graphql-codegen/cli --save-dev

1. 创建一个GraphQL查询文件，例如query.graphql，并在其中定义你的查询。例如：

query {
  getUser(id: 1) {
    id
    name
    email
  }
}

1. 在Angular项目的根目录下创建一个codegen.yml文件，并添加以下内容：

schema: path/to/your/schema.graphql
documents: 
  - path/to/your/query.graphql
generates:
  path/to/generated/file.ts:
    plugins:
      - typescript-angular

确保将path/to/your/schema.graphql替换为你的GraphQL模式文件的路径，将path/to/your/query.graphql替换为你的查询文件的路径，将path/to/generated/file.ts替换为你希望生成的TypeScript文件的路径。

1. 运行以下命令来生成TypeScript文件：

npx graphql-codegen

这将根据你的codegen.yml文件中的配置生成TypeScript文件。

1. 在你的Angular组件中导入生成的TypeScript文件。例如，如果生成的文件名为generated.ts，则可以在组件中添加以下导入语句：

import { getUserQuery } from './path/to/generated';

确保将./path/to/generated替换为生成的TypeScript文件的实际路径。

现在，你可以在Angular组件中使用getUserQuery来执行默认导出的GraphQL查询了。

请注意，以上步骤假设你已经配置了GraphQL模式文件，并且你的Angular项目已经正确设置了GraphQL客户端。如果你还没有配置GraphQL模式文件或GraphQL客户端，请参考相关文档进行配置。