11、深入探索GraphQL、React Context API与Suspense的应用

深入探索GraphQL、React Context API与Suspense的应用

1. 构建登录系统与仪表盘组件

在开发项目时，登录系统和仪表盘组件是常见的功能模块。下面将详细介绍如何构建它们。
首先是登录组件，代码如下：

// 登录组件代码省略部分，仅展示关键结构
export default Login

接着创建仪表盘组件，主要包含两个文件：
- DashboardLayout.tsx ：该文件路径为 /frontend/src/components/dashboard/DashboardLayout.tsx ，用于保护仪表盘页面，只允许已登录用户访问。

// Dependencies
import { FC, ReactElement, useContext } from 'react'
// Contexts
import { UserContext } from '../../contexts/user'
// Components
import Dashboard from './Dashboard'

const Layout: FC = () => {
  const { connectedUser } = useContext(UserContext)
  // We only render the Dashboard if the user is connected
  if (connectedUser