要使用Apollo客户端适用于Angular,从GraphQL文件生成代码,可以按照以下步骤进行操作:
npm install apollo-angular apollo-angular-link-http apollo-client apollo-link apollo-link-context graphql graphql-tag
queries.graphql
,其中包含您的GraphQL查询和相应的类型定义。例如:query GetUser($userId: Int!) {
user(id: $userId) {
id
name
email
}
}
graphql-codegen
库来生成代码。首先,安装它:npm install -g graphql-codegen
codegen.yml
文件,指定代码生成的配置。例如:schema: "http://localhost:4000/graphql"
generates:
path/to/generated/file.ts:
plugins:
- typescript
- typescript-apollo-angular
config:
withComponent: true
在这个配置中,将schema
属性设置为您的GraphQL服务器的地址,path/to/generated/file.ts
设置为您希望生成的代码文件的路径。withComponent
选项指定是否为查询生成组件。
graphql-codegen
这将根据配置文件生成相应的代码文件。
Apollo
服务来执行查询。例如:import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { GetUserQuery, GetUserGQL } from './path/to/generated/file.ts';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
user: GetUserQuery['user'];
constructor(private apollo: Apollo, private getUser: GetUserGQL) { }
ngOnInit() {
this.getUser.watch({ userId: 1 }).valueChanges.subscribe(({ data }) => {
this.user = data.user;
});
}
}
在这个示例中,GetUserQuery
和GetUserGQL
是根据GraphQL文件生成的类型和查询钩子。可以使用watch
方法来执行查询,并在数据变化时更新组件。
这样,您就可以使用Apollo客户端适用于Angular,从GraphQL文件生成代码并将其用于应用中。