首先,需要安装apollo-angular和graphql-tag:
npm install apollo-angular graphql-tag --save
接着,在需要使用GraphQL的组件中引入需要使用的模型和相关的查询或Mutation。例如:
import { Component } from "@angular/core";
import { Apollo } from "apollo-angular";
import gql from "graphql-tag";
// 通过GraphQL查询获取数据
const MY_QUERY = gql`
query getMyData {
myData {
id
name
}
}
`;
@Component({
selector: "app-my-component",
template: `
{{data.name}}
ID: {{data.id}}
`
})
export class MyComponent {
myData: any;
constructor(private apollo: Apollo) {}
ngOnInit() {
// 使用Apollo查询获取数据
this.myData = this.apollo.watchQuery({
query: MY_QUERY
}).valueChanges.pipe(
map(({data}) => data.myData)
);
}
}
这里使用了Apollo Angular客户端库来发出GraphQL查询并获取数据。需要注意的是,这里的数据模型需要和GraphQL中定义的类型一致。
使用装饰器来定义模型也可以和GraphQL一起使用。例如:
import { Component } from "@angular/core";
import { Apollo } from "apollo-angular";
import gql from "graphql-tag";
import { graphql } from "@decorators/graphql";
// 使用装饰器定义数据模型
@graphql(`
type MyData {
id: ID!
name: String!
}
type Query {
myData: MyData
}
`)
@Component({
selector: "app-my-component",
template: `
{{data.name}}
ID: {{data.id}}
`
})
export class MyComponent {
myData: any;
constructor(private apollo: Apollo) {}
ngOnInit() {
// 使用Apollo查询