Angular 中集成 GraphQl
- 找到 Angular 中集成 GraphQl 的文档
- 在 Angular 中使用 GraphQl 非常简单
1、在你的项目中安装 apollo-angular
ng add apollo-angular
2、安装 graphql apollo-client 相关的的模块
npm install apollo-client apollo-cache-inmemory apollo-angular-link-http apollo-angular graphql-tag graphql --save
- 修改远程连接地址
执行上面操作后 apollo-angular 会自动在我们的 src 目录里面生成 graphql.module.ts，并在app.module.ts 中引入。
我们需要修改 graphql.module.ts 中的 uri
注意：如果 ng add 失败请参考
Angular 中使用 GraphQl 查询 ServerApi
- 查询数据
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
const GET_DOGS = gql` {
navList {
title
url
}
}
`;
export class HomeComponent implements OnInit {
navList: any;
constructor(private apollo: Apollo) { }
ngOnInit() {
this.apollo
.watchQuery({
query: GET_DOGS,
})
.valueChanges.subscribe((result: any) => {
console.log(result)
this.navList = result.data.navList;
});
}
}
- Angular GraphQl 传参查询
import { Component, OnInit } from '@angular/core';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
const GET_Article = gql` query ($page:Int!){
articleList(page:$page) {
title
}
}
`;
@Component({
selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
articleList: any;
constructor(private apollo: Apollo) { }
ngOnInit() {
this.apollo
.query({
query: GET_Article, variables: {
page: 3
}
})
.subscribe((result: any) => {
console.log(result)
this.articleList = result.data.articleList;
});
}
- 更新数据
可以通过查看源代码找到更新数据的代码
import { Component, OnInit } from '@angular/core';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
const SAVE_NAV = gql`mutation ($title: String!,$description: String!) {
addNav(title:$title,description:$description){
title
}
}`;
@Component({
selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
articleList: any;
constructor(private apollo: Apollo) { }
ngOnInit() {
}
updateData() {
this.apollo
.mutate({
mutation: SAVE_NAV, variables: {
title: 'Angular 导航', description: "Angular 导航"
}
})
.subscribe((result: any) => {
console.log(result)
});
}
}
- 更新 Mutation refetchQueries
import { Component, OnInit } from '@angular/core';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
const GET_NAV = gql` {
navList {
title,sort
}
}
`;
const SAVE_NAV = gql`mutation ($title: String!,$description: String!) {
addNav(title:$title,description:$description){
title
}
}`;
@Component({
selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
navList: any;
constructor(private apollo: Apollo) { }
ngOnInit() {
this.apollo
.watchQuery({
query: GET_NAV,
})
.valueChanges.subscribe((result: any) => {
console.log(result)
this.navList = result.data.navList;
});
}
updateData() {
this.apollo
.mutate({
mutation: SAVE_NAV, variables: {
title: 'Angular 导航', description: "Angular 导航"
}, refetchQueries: [{ //更新完成执行的操作
query: GET_NAV
// variables: { repoFullName: 'apollographql/apollo-client' }, }]
})
.subscribe((result: any) => {
console.log(result)
});
}
}
