Angular 中集成 GraphQl

1. 找到 Angular 中集成 GraphQl 的文档

2. 在 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

3. 修改远程连接地址

执行上面操作后 apollo-angular 会自动在我们的 src 目录里面生成 graphql.module.ts，并在app.module.ts 中引入。

我们需要修改 graphql.module.ts 中的 uri

注意：如果 ng add 失败请参考

Angular 中使用 GraphQl 查询 ServerApi

1. 查询数据

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;
            });
    }
}

2. 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;
            });
    }

3. 更新数据

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)
            });
    }
}

4. 更新 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)
            });
    }
}