将 Angular 与 GraphQL 集成：设置方法、使用说明、好处以及搭建一个简单的 Node.js 服务器。
Angular 配合 GraphQL 一起使用
简介在现代应用开发中，选择合适的前端与后端通信技术非常重要。GraphQL 是一种强大的 REST 替代方案，提供了更灵活和高效的数据获取方法。本文将探讨如何在 Angular 18 应用中设置和使用 GraphQL，利用独立组件特性，并探讨其应用场景和优势。
一个GraphQL是什么呢？GraphQL 是由 Facebook 开发的一种 API 查询语言，它允许你请求确切需要的数据，而不会有任何冗余。与 REST 不同，REST 的固定端点总是返回预定义的数据，而 GraphQL 则允许你自定义响应结构。
GraphQL的好处- 数据检索效率: 通过允许你在单次调用中请求所需的确切数据，减少请求次数。
- 灵活性: 允许客户端定义返回数据的结构，避免过度获取数据和获取不足数据的问题。
- 快速开发: 促进 API 的演变，无需创建新版本。
- 强类型: 利用类型系统帮助避免常见的错误。
首先，我们需要安装必要的库。我们将使用Apollo客户端，这是一个流行的用于Angular应用的GraphQL客户端。
运行此命令以添加apollo-angular插件：
ng add apollo-angular创建一个名为 graphql.provider 的文件来设置 Apollo 客户端的配置。
import { ApplicationConfig, inject } from '@angular/core';
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
const uri = 'http://localhost:4000'; // <-- 请在这里添加 GraphQL 服务器的 URL
export function apolloOptionsFactory(): ApolloClientOptions<any> {
const httpLink = inject(HttpLink);
return {
link: httpLink.create({ uri }),
cache: new InMemoryCache(),
};
}
export const graphqlProvider: ApplicationConfig['providers'] = [
Apollo,
{
provide: APOLLO_OPTIONS,
useFactory: apolloOptionsFactory,
},
];在您的应用程序的主模块中，导入并设置 ApolloModule。
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { graphqlProvider } from './graphql.provider';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(),
provideHttpClient(),
graphqlProvider
]
};我们来创建一个名为 user.service.ts 的文件来管理 GraphQL 查询吧。
import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class UserService {
private PATH = "/graphql";
private HOST = "http://localhost:4000";
private fullUrl = this.HOST + this.PATH;
constructor(private apollo: Apollo) { }
getUsers(): Observable<any> {
return this.apollo
.watchQuery({
query: gql`
query {
users {
id
name
email
}
}
`,
context: {
uri: this.fullUrl,
},
})
.valueChanges.pipe(map((result: any) => result.data.users));
}
}除了查询之外，我们还可以执行修改操作来更改数据。在 user.service.ts 文件中添加一个这样的修改操作。
创建用户(姓名: string, 电子邮件: string): Observable<any> {
return this.apollo.mutate({
mutation: gql`
mutation ($姓名: String!, $电子邮件: String!) {
创建用户(姓名: $姓名, 电子邮件: $电子邮件) {
id
姓名
电子邮件
}
}
`,
context: {
uri: this.fullUrl,
},
变量: {
姓名: 姓名,
电子邮件: 电子邮件,
},
}).pipe(map((结果: any) => 结果.data.创建用户));
}让我们创建一个独立的组件，利用 UserService 来获取及创建用户。
创建一个叫 user.component.ts 的文件。
import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
standalone: true,
imports: [CommonModule],
template: `
<div>
<h1>用户列表</h1>
<ul>
<li *ngFor="let user of users">{{ user.name }} ({{ user.email }})</li>
</ul>
<button (click)="addUser()">新增用户</button>
</div>
`,
})
export class UserComponent {
private userService = inject(UserService);
users: any[] = [];
constructor() {
this.userService.getUsers().subscribe((data) => (this.users = data));
}
addUser() {
this.userService.createUser('新用户 (New User)', 'newuser@example.com').subscribe((user) => {
const newUsers = [...this.users];
newUsers.push(user);
this.users = newUsers;
});
}
}为了支持你的 GraphQL API，我们来用 Node.js、express 和 apollo-server-express 创建一个简单的服务器来支持你的 GraphQL API。
1. 新建一个 Node.js 项目首先，为你的项目创建一个新的文件夹，然后初始化你的 Node.js 项目。
创建一个名为my-graphql-server的目录
转到my-graphql-server目录
使用npm初始化一个新的项目，自动确认所有默认设置安装所需的依赖项:
npm install express apollo-server-express graphql在你项目根目录下创建一个名为 server.js 的文件，并在里面加上下面这段代码。
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
// 定义 GraphQL 架构
const typeDefs = gql`
type User {
id: ID!
name: String!
email: String!
}
type Query {
users: [User]
}
type Mutation {
createUser(name: String!, email: String!): User
}
`;
// 模拟数据
let users = [
{ id: '1', name: 'John Doe', email: 'john@example.com' },
{ id: '2', name: 'Jane Smith', email: 'jane@example.com' },
];
// 定义解析函数
const resolvers = {
Query: {
users: () => users,
},
Mutation: {
createUser: (parent, args) => {
const newUser = { id: String(users.length + 1), ...args };
users.push(newUser);
return newUser;
},
},
};
// 初始化 Apollo Server
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.start().then(res => {
server.applyMiddleware({ app });
// 启动服务
app.listen({ port: 4000 }, () =>
console.log(`服务已启动并运行于 http://localhost:4000${server.graphqlPath}`)
);
});现在，运行服务器的命令如下：
# 可以在这里填入具体的命令运行 `node server.js`你的 GraphQL 服务器将会在 http://localhost:4000/graphql 这个地址运行。
测测服务器你可以使用 Apollo Sandbox 或任何 GraphQL 客户端来测试 GraphQL 服务器。这里有一些查询和变异操作的示例供你测试。
查询：获取用户信息
{
query {
用户 {
id
名字
邮箱
}
}
}突变：创建用户账号
mutation {
createUser(name: "New User", email: "newuser@example.com") {
id
name
email
}
}- 仪表板应用： 在这里需要高效地从不同的来源获取特定数据并进行整合。
- 管理系统： 用于处理创建、读取、更新和删除（CRUD）数据的复杂操作任务。
- 电子商务： 为了优化产品搜索和展示，包括动态筛选和分类等功能。
在 Angular 18 中集成 GraphQL 可以为应用程序开发的效率和灵活性带来许多好处。从设置到执行查询和变异的过程，可以使用 GraphQL 让开发者更好地获取和操作数据。此外，在 Node.js 中创建一个 GraphQL 服务器非常简单，并且可以迅速配置以满足您的 API 需求。
接下来的方法步骤- 实现GraphQL中的身份验证
- 使用订阅功能来实现实时更新
- 探索GraphQL性能监控工具的使用
访问该仓库点击这里
关注我领英上的动态: https://www.linkedin.com/in/erickzanetti
共同学习，写下你的评论
评论加载中...
作者其他优质文章
