浅谈在Angular项目中怎么从RESTful API转移到Graphql API

你了解 GraphQL 吗？

简单的说，GraphQL是一个开源的查询语言和协议API。GraphQL API是基于REST架构的现代化替代者。不同于REST，GraphQL允许客户端根据其需要请求特定的部分数据，这与请求固定数据结构的方式不同。

GraphQL 是 API 开发领域向前迈进的重要一步。类型安全、内省、文档生成和可预测响应对平台的维护者和平台的使用者都有好处。

怎么借助Apollo使用GraphQL?

以下demo使用场景：通过接口查询用户信息name，age，married三个字段的值

1.首先npm安装需要的包（项目里使用的是Angular14版本，请找到适合自己的包版本）

"@apollo/client": "^3.7.0",
"apollo-angular": "^4.1.0",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",

2.新建一个graphql.module.ts文件

import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";
import { InMemoryCache } from "@apollo/client/core";
import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
import { HttpLink } from 'apollo-angular/http'
import { environment } from "../../environments/environment";

export function createApollo(httpLink:HttpLink){
    return {
        link:httpLink.create({uri: environment.graphqlUrl}),
        cache:new InMemoryCache()
    }
}

@NgModule({
    imports:[HttpClientModule,ApolloModule],
    providers:[{
        provide: APOLLO_OPTIONS,
        useFactory:createApollo,
        deps:[HttpLink]
    }]
})

export class GraphqlModule{}

其中graphqlUrl是你在environment文件里配置的接口地址比如: http://localhost:4000/graphql 

然后在主模块app.module.ts里面导入GraphqlModule

imports: [ GraphqlModule ]

3.定义graphql查询或修改语句, 新建user.query.ts文件

import gql from "graphql-tag";

export const usersQuery = gql`
    query queryAllUsers{
      getAllUsers {
        age
        name
        married
      }
    }
`;

4.接下来就需要一个服务来处理这些接口访问的，新建user.service.ts文件

import { Injectable } from "@angular/core";
import { Apollo } from "apollo-angular";
import { map, Observable } from "rxjs";
import { usersQuery } from "../graphql/_query/user.query";

@Injectable({ providedIn: 'root' })
export class UserService {
    constructor(private readonly apollo: Apollo) { }

    getAllUsers(): Observable<User[]> {
        return this.apollo.query<GetAllUsers>({ query: usersQuery, fetchPolicy: 'network-only'}).pipe(map(res => {
            return res && res.data.getAllUsers;
        }))
    }
}

export interface GetAllUsers{
    getAllUsers: User[];
}
export interface User {
    name: string,
    age: number,
    married: boolean
  }

5. 这时候我们就可以在代码里需要的地方调用这个服务去访问接口，

import { UserService } from 'src/app/services/user.service';

@Component({
  ...
})
export class DemoComponent implements OnInit {
    constructor(private userService: UserService){}

    render(){
        this.userService.getAllUsers().subscribe(res => {console.log(res)})
    }
}

由于在组件里使用了依赖注入UserService, 所以我们需要在主模块app.module.ts里面引入提供商,

providers: [{ provide: UserService, useClass: UserService, deps: [Apollo] }]

这样一个完整的前端Graphql查询就完成了，我们的例子只用了query操作，大家也可以尝试使用mutate操作，原理都是一样的。