Angular 中使用apollo-angular操作GraphQl Server API接口

GraphQL是一种新的API 的查询语言,它提供了一种更高效、强大和灵活API 查询,GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余。它弥补了RESTful API(字段冗余,扩展性差、无法聚合api、无法定义数据类型、网络请求次数多)等不足。

注意:GraphQL是api的查询语言,而不是数据库。从这个意义上说,它是数据库无关的,而且可以在使用API的任何环境中有效使用,我们可以理解为GraphQL是基于API之上的一层封装,目的是为了更好,更灵活的适用于业务的需求变化。 


GraphQL视频教程: https://www.itying.com/goods-1061.html


GraphQL可以用在常见各种服务器端语言以及客户端语言中。

服务器端语言:C# / .NET、Clojure、Elixir、Erlang、Go、Groovy、Java、JavaScript、PHP、Python、Scala、Ruby

客户端语言:js、React + React Native、Angular、Vue.js、Apollo Link、Native iOS、Native Android、Scala.js



下面我们看看Angular 中使用apollo-angular操作GraphQl Server API接口


找到Angular中集成GraphQl的文档:https://github.com/apollographql/apollo-angular


一、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

二、Angular中使用GraphQl查询 Server Api

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

  }
}