实战项目中的GraphQL应用指南
立即解锁
发布时间: 2025-09-04 01:47:17 阅读量: 8 订阅数: 36 AIGC 
React 18设计模式精要
### 实战项目中的 GraphQL 应用指南
在现代 Web 开发中，GraphQL 作为一种强大的数据查询语言，正逐渐成为构建高效、灵活 API 的首选方案。本文将详细介绍如何在一个实际项目中应用 GraphQL，包括前端和后端的配置、用户认证、路由管理等方面，帮助你构建一个完整的登录系统。
#### 1. 项目初始化与基础配置
在开始项目之前，我们需要进行一些基础配置，包括 Webpack 类型定义、HTML 文件创建、TypeScript 配置以及 Express 服务器的搭建。
##### 1.1 Webpack 类型定义
首先，我们需要创建 Webpack 类型文件 `/frontend/webpack/webpack.types.ts`，定义 Webpack 所需的 TypeScript 类型：
```typescript
export type WebpackMode = 'production' | 'development'
export type ConfigArgs = {
mode: WebpackMode
presets: string[]
}
```
##### 1.2 HTML 文件创建
接着，创建初始的 HTML 文件 `/frontend/src/client/index.html`，该文件将由 HtmlWebpackPlugin 处理：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
```
##### 1.3 TypeScript 配置
TypeScript 能够提前识别代码中的错误，在大型项目中尤为有用。我们的 `tsconfig.json` 文件配置如下：
```json
{
"compilerOptions": {
"sourceMap": true,
"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noImplicitAny": false,
"paths": {
"~/*": ["./src/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "**/*.test.tsx"]
}
```
##### 1.4 Express 服务器配置
我们的应用需要一个 Express 服务器来进行验证和会话管理。以下是服务器代码 `/frontend/src/server.ts`：
```typescript
import cookieParser from 'cookie-parser'
import cors from 'cors'
import express, { Application, Request, Response } from 'express'
import { resolve } from 'path'
import * as config from '../config'
import html from './html'
import { isConnected } from './lib/middlewares/user'
// Express application
const app: Application = express()
const distDir = resolve('dist')
const staticDir = resolve('src', 'static')
// Middlewares
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cookieParser(config.security.secretKey))
app.use(cors({ credentials: true, origin: true }))
// Static directories
app.use(express.static(distDir))
app.use(express.static(staticDir))
// Routes
app.get('/login', isConnected(false), (req: Request, res: Response) => {
res.send(html({ title: 'My Website' }))
})
app.get(`/logout`, (req: Request, res: Response) => {
const redirect: any = req.query.redirectTo || '/'
res.clearCookie('at')
res.redirect(redirect)
})
app.get('*', (req: Request, res: Response) => {
res.send(html({ title: 'My Website' }))
})
export default app
```
我们的网站有四个主要路由：
- `/`：主页（由 React 处理）
- `/dashboard`：仪表盘，受保护，仅允许具有 god 或 admin 权限的用户访问（先由 Express 处理，再由 React 处理）
- `/login`：登录页（由 React 处理）
- `/logout`：删除现有会话（由 Express 处理）
#### 2. 前端配置
接下来，我们需要创建前端配置文件 `/frontend/src/config.ts`，用于管理 GraphQL 端口、服务器以及安全配置：
```typescript
// Types
type API = {
uri: string
}
type Security = {
secretKey: string
expiresIn: string
}
// Environment Configuration
export const isProduction: boolean = process.env.NODE_ENV === 'production'
export const isDevelopment: boolean = process.env.NODE_ENV !== 'production'
// Server Configuration
const devUrl = 'localhost'
const prodUrl = 'localhost' // change this to your production url
export const PORT: number = Number(process.env.PORT) || 3000
export const DEV_SERVER_PORT = 3001
export const GRAPHQL_PORT = 4000
export const GRAPHQL_SERVER = isDevelopment ? devUrl : prodUrl
// Paths Configuration
export const domain: string = devUrl
export const baseUrl: string = isProduction
? `https://${domain}:${PORT}`
: `http://${domain}:${PORT}` // Remove port in actual production
export const publicPath: string = isProduction
? ``
: `http://${domain}:${DEV_SERVER_PORT}/`
// API Configuration
export const api: API = {
uri: `http://${GRAPHQL_SERVER}:${GRAPHQL_PORT}/graphql`
}
// Security Configuration
export const security: Security = {
secretKey: process.env.SECURITY_SECRET_KEY || '',
expiresIn: '7d'
}
```
#### 3. 用户中间件与 JWT 函数
为了验证用户是否已连接并具有正确的权限，我们需要创建用户中间件和 JWT 函数。
##### 3.1 用户中间件
创建文件 `/frontend/src/server/lib/middlewares/user.ts`：
```typescript
import { NextFunction, Request, Response } from 'express'
import { getUserData } from '../jwt'
export const isConnected = (isLogged = true, roles = ['user'], redirectTo = '/') =>
async (req: Request, res: Response, next: NextFunction): Promise<void> => {
const user = await getUserData(req.cookies.at)
if (!user && !isLogged) {
return next()
}
if (user && isLogged) {
if (roles.includes('god') && user.role === 'god') {
return next()
}
if (roles.includes('admin') && user.role === 'admin') {
return next()
}
if (roles.includes('user') && user.role === 'user') {
return next()
}
res.redirect(redirectTo)
} else {
res.redirect(redirectTo)
}
}
```
这个中间件可以控制是否验证用户是否已连接，验证特定角色，并在用户未连接或角色不正确时重定向用户。
##### 3.2 JWT 函数
创建文件 `/frontend/src/server/lib/jwt.ts`：
```typescript
import { getBase64 } from '@contentpi/lib'
import jwt from 'jsonwebtoken'
import * as config from '~/config'
const { security: { secretKey } } = config
export function jwtVerify(accessToken: string, cb: any) {
jwt.verify(accessToken, secretKey, (error: any, accessTokenData: any = {}) => {
const { data: user } = accessTokenData
if (error || !user) {
return cb(null)
}
const userData = getBase64(user)
return cb(userData)
})
}
export async function getUserData(accessToken: string): Promise<any> {
const UserPromise = new Promise(
(resolve) => jwtVerify(accessToken, (user: any) => resolve(user))
)
const user = await UserPromise
return user
}
```
`getUserData` 函数将使用从 cookie 中获取的访问令牌检索用户数据。
#### 4. GraphQL 查询与突变
我们已经在后端项目中创建了所需的查询和突变，现在需要在前端项目中创建执行它们的文件。
##### 4.1 getUser 查询
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
买1年送3月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
打造零食推送机器人：从代码实现到硬件采购指南
# 打造零食推送机器人：从代码实现到硬件采购指南
## 1. 创建零食推送应用
在构建零食推送应用时，我们已经完成了部分代码编写，以下是相关代码：
```html
{% for item in items %}
<button formaction="{{ item['code'] }}">
{{ item['icon'] }}<br>
{{ item['code'] }}
</button>
{% end %}
</form>
</body>
</html>
```
现在，应用的大部分功能已就绪，可以开始运行并测试其部分功能。操作步骤如下：
数据处理与非关系型数据库应用指南
### 数据处理与非关系型数据库应用指南
#### 1. 数据转换与处理
在数据处理过程中，有时需要将 CSV 文件转换为 XML 文档，且 XML 文档可能需符合 XML 模式，甚至要遵循用于商业报告的 XBRL 标准（https://en.wikipedia.org/wiki/XBRL ）。
数据转换可以涉及两个或更多数据源，以创建一个新的数据源，其属性需符合所需格式。以下是仅涉及两个数据源 A 和 B 的四种数据转换场景，A、B 数据合并生成数据源 C，且 A、B、C 可以有不同的文件格式：
- 包含 A 的所有属性和 B 的所有属性。
- 包含 A 的所有属性和 B 的部分属性。
Linux终端实用工具与技巧
# Linux 终端实用工具与技巧
## 1. gnuplot 绘图与导出
### 1.1 绘制方程图形
任何方程都可以用特定方式绘制图形。例如，一个斜率为 5、y 轴截距为 3 的直线方程，可使用以下命令生成图形：
```bash
plot 5*x + 3
```
### 1.2 导出图形为图像文件
虽然能在终端显示图表，但多数情况下，我们希望将图表导出为图像，用于报告或演示。可按以下步骤将 gnuplot 设置为导出图像文件：
1. 切换到 png 模式：
```bash
set terminal png
```
2. 指定图像文件的输出位置，否则屏幕将显示未处理的原始 png 数据：
深入理解块层I/O处理与调度及SCSI子系统
### 深入理解块层 I/O 处理与调度及 SCSI 子系统
#### 1. I/O 调度器概述
I/O 调度是块层的关键功能。当读写请求经过虚拟文件系统的各层后，最终会到达块层。块层有多种 I/O 调度器，不同调度器适用于不同场景。
#### 2. 常见 I/O 调度器及其适用场景
| 使用场景 | 推荐的 I/O 调度器 |
| --- | --- |
| 桌面 GUI、交互式应用和软实时应用（如音频和视频播放器） | BFQ，可保证对时间敏感应用的良好系统响应性和低延迟 |
| 传统机械驱动器 | BFQ 或 MQ - deadline，两者都适合较慢的驱动器，Kyber/none
利用Terraform打造完美AWS基础设施
### 利用 Terraform 打造完美 AWS 基础设施
#### 1. 建立设计框架
在明确基础设施需求后，下一步是建立一个设计框架来指导开发过程。这包括定义用于构建基础设施的架构原则、标准和模式。使用诸如 Terraform 之类的基础设施即代码（IaC）工具，有助于建立一致的设计框架，并确保基础设施达到高标准。
建立设计框架时，有以下重要考虑因素：
- 为应用程序或工作负载选择合适的架构风格，如微服务、无服务器或单体架构。
- 根据已定义的需求和设计原则，选择合适的 AWS 服务和组件来构建基础设施。
- 定义基础设施不同组件之间的关系和依赖，以确保它们能平稳高效地协同工作。
-
时间序列、因果关系与文本挖掘：从理论到实践
# 时间序列、因果关系与文本挖掘：从理论到实践
## 1. 时间序列与因果关系
时间在机器学习和分析领域至关重要。在分析时间序列时，我们需要注意常见的陷阱，并掌握相应的解决方法。以全球温度异常和人类二氧化碳排放为例，我们进行了单变量和双变量时间序列分析。同时，运用格兰杰因果检验来判断大气中二氧化碳水平是否会导致地表温度异常。结果发现，从二氧化碳到温度的格兰杰因果检验的 p 值大于 0.05 但小于 0.10，这表明格兰杰因果检验是研究机器学习问题中因果关系的有效工具。
此外，时间序列分析还有很多值得深入探索的领域，如变化点检测、时间序列分解、非线性预测等，这些方法虽不常被视为机器学习的常用
x64指令集部分指令详解
# x64指令集部分指令详解
## 1. ROL/ROR指令
### 1.1 影响的标志位
|标志位|含义|
| ---- | ---- |
|O|溢出标志（OF）|
|D|方向标志（DF）|
|I|中断标志（IF）|
|T|陷阱标志（TF）|
|S|符号标志（SF）|
|Z|零标志（ZF）|
|A|辅助进位标志（AF）|
|P|奇偶标志（PF）|
|C|进位标志（CF）|
其中，ROL和ROR指令会影响OF和CF标志位，具体如下：
- ROL：每次移位操作时，最左边的位会复制到CF。
- ROR：每次移位操作时，最右边的位会复制到CF。
- OF：只有按1位移位的形式会修改OF，按CL移
PHP编程基础与常用操作详解
### PHP编程基础与常用操作详解
#### 1. 变量运算与操作符
在PHP中，变量的运算和操作符的使用是基础且重要的部分。例如：
```php
$i += 10; // $i is 110
$i = $i / 2; // $i is 55
$j = $i; // both $j and $i are 55
$i = $j % 11; // $i is 0
```
最后一行使用了取模运算符 `%`，它的作用是将左操作数除以右操作数并返回余数。这里 `$i` 为 55，55 除以 11 正好 5 次，没有余数，所以结果为 0。
字符串连接运算符是一个句点 `.`，它的作用是将字符串连接在
VisualStudioCode与Git的源代码控制
# Visual Studio Code与Git的源代码控制
## 1. 软件开发中的协作与Visual Studio Code的支持
软件开发通常离不开协作，无论你是开发团队的一员、参与开源项目，还是与客户有交互的独立开发者，协作都是必不可少的。微软大力支持协作和开源，因此Visual Studio Code提供了一个基于Git的集成源代码控制系统，并且可以扩展到其他版本控制服务提供商。
这个系统不仅包含了Visual Studio Code中开箱即用的用于源代码协作的集成工具，还可以通过使用一些扩展来提升工作效率。这些扩展能帮助你更好地审查代码，并将工作成果推送到基于Git的服务，如A
Vim与Source命令的高效使用指南
### Vim与Source命令的高效使用指南
#### 1. Vim代码片段管理
在Vim中，我们可以创建代码片段文件，以便在编辑时快速插入常用代码。以下是具体步骤：
1. **创建代码片段存储目录**：
```sh
[me@linuxbox ~]$ mkdir ~/.vim/snippets
[me@linuxbox ~]$ exit
```
2. **复制文本并创建代码片段文件**：
- 在可视模式下高亮并复制文本。
- 打开新缓冲区创建代码片段文件：
```
:e ~/.vim/snippets/gpl.
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
