2026/9/16 13:00:15
FEATURED · 精选文章 
使用 React 与 Nhost GraphQL 构建电影数据库Nhost React Quickstart 实战指南【免费下载链接】nhostThe Open Source Firebase Alternative with GraphQL.项目地址: https://gitcode.com/GitHub_Trending/nh/nhost本篇文章以 examples/quickstarts/react 官方快速入门示例为核心完整演示如何在 React 前端中接入 Nhost 本地后端从启动nhost up拉起整套后端服务到用nhost/nhost-js客户端发起 GraphQL 查询最终把movies表数据渲染成响应式表格。读完本文你将掌握 Nhost 本地开发的最小闭环CLI 启动 → 数据库迁移 → GraphQL 查询 → React 渲染并理解客户端配置、后端权限与数据模型的对应关系。示例目标一个最小的电影数据库应用该 Quickstart 演示了用 React 与 Nhost 的 GraphQL API 构建一个简单的电影数据库应用其核心学习点包括使用nhost/nhost-js在 React 中配置 Nhost 客户端连接本地 Nhost 后端通过nhost up启动使用 GraphQL 查询获取数据将数据展示在响应式表格中。整个示例由两部分组成位于 examples/quickstarts/backend 的 Nhost 后端工程含 Hasura GraphQL 引擎、Postgres 数据库与movies表迁移以及位于 examples/quickstarts/react 的 Vite React 前端工程。快速开始三步跑通完整链路第一步启动本地 Nhost 后端在backend/目录即 examples/quickstarts/backend下执行cd ../backend cp .secrets.example .secrets nhost up其中.secrets.example是本仓库为后端提供的密钥模板内容包含GRAFANA_ADMIN_PASSWORD grafana-admin-password HASURA_GRAPHQL_ADMIN_SECRET nhost-admin-secret HASURA_GRAPHQL_JWT_SECRET 0f987876650b4a085e64594fae9219e7781b17506bec02489ad061fba8cb22db NHOST_WEBHOOK_SECRET nhost-webhook-secretnhost up会依据 nhost.toml 拉起完整后端栈。仓库还提供了 env-up.sh 脚本自动完成「若不存在.secrets则从模板复制」再执行nhost up的逻辑可以直接./env-up.sh替代手动两步。从 nhost.toml 可以看到本次示例锁定的服务版本与关键配置Hasurav2.46.0-ce通过adminSecret/jwtSecrets引用.secrets中的密钥devMode true、enableConsole true便于本地调试Auth0.38.1示例场景下邮箱密码登录启用、emailVerificationRequired true、密码最短 9 位同时配置了访问令牌 900 秒过期、刷新令牌 2592000 秒30 天过期等会话参数Postgres14.18-20250728-1Storage0.7.2。首次启动时Nhost CLI 会自动应用 migrations/default/1757318506781_movies/up.sql 中的迁移创建movies表并写入 4 条示例数据CREATE TABLE movies ( id SERIAL PRIMARY KEY, title VARCHAR(255) NOT NULL, director VARCHAR(255), release_year INTEGER, genre VARCHAR(100), rating FLOAT ); INSERT INTO movies (title, director, release_year, genre, rating) VALUES (Inception, Christopher Nolan, 2010, Sci-Fi, 8.8), (The Godfather, Francis Ford Coppola, 1972, Crime, 9.2), (Forrest Gump, Robert Zemeckis, 1994, Drama, 8.8), (The Matrix, Lana Wachowski, Lilly Wachowski, 1999, Action, 8.7);第二步安装依赖并启动前端npm install npm run dev前端工程 package.json 声明了关键依赖nhost/nhost-js以workspace:^形式引用仓库内 packages/nhost-js 的源码、react/react-dom^19.2.3、vite^8.0.16与vitejs/plugin-react。npm run dev实际执行 Vite 开发服务器npm run build与npm run preview用于生产构建与本地预览。第三步打开浏览器访问应用在浏览器中打开 http://localhost:51735173 是 Vite 开发服务器默认端口可在 vite.config.js 中按需调整server.port。页面将展示从本地 Nhost 后端 GraphQL API 拉取的电影列表表格。关键文件逐一拆解src/lib/nhost.jsNhost 客户端配置import { createClient } from nhost/nhost-js; export const nhost createClient({ subdomain: local, region: local, });这是全应用唯一的客户端配置点。createClient来自仓库内的nhost/nhost-js包源码位于 packages/nhost-js/src。与连接云端 Nhost 项目时填写真实subdomain/region不同这里固定为local表示连接本地nhost up启动的后端实例——Nhost CLI 会在本地暴露 GraphQL 端点客户端据此自动解析出对应的 Hasura GraphQL 地址。全局只需创建一次客户端实例并导出之后在任何组件中 import 复用。src/App.jsx主组件与 GraphQL 查询src/App.jsx 演示了 React Hooks 与 Nhost GraphQL 客户端组合的完整数据流import { useEffect, useState } from react; import { nhost } from ./lib/nhost; import ./App.css; function App() { const [movies, setMovies] useState([]); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchMovies async () { try { const resp await nhost.graphql.request({ query: query GetMovies { movies { title director release_year genre rating } }, }); setMovies(resp.body.data.movies || []); } catch { setError(Failed to fetch movies); } finally { setLoading(false); } }; fetchMovies(); }, []); ... }实现要点状态管理useState分别维护movies数据、loading加载态与error错误态useEffect空依赖数组在组件挂载时发起一次查询查询方式nhost.graphql.request({ query })是nhost/nhost-js提供的底层 GraphQL 请求入口直接传入 GraphQL 查询字符串响应体在resp.body.data中取movies数组存入状态容错处理查询失败时设置Failed to fetch movies错误信息finally中关闭加载态渲染时先判loading与error再渲染表格。查询的字段title/director/release_year/genre/rating与movies表列一一对应且能通过后端权限控制正常工作。在 public_movies.yaml 中可以看到示例为movies表配置了public角色的select_permissions允许匿名未登录读取全部列过滤条件为空{}——这正是前端无需登录即可查询数据的原因从源码结构看如需限制访问可在此处改为user角色并增加基于auth的过滤条件。表格渲染部分将每部电影映射为一行包含 Title、Director、Release Year、Genre、Rating 五列并使用数组索引作为 key源码中以biome-ignore注释说明这是 quickstart 场景下的刻意简化。src/main.jsxReact 入口src/main.jsx 使用 React 19 的createRootAPI 将App /挂载到index.html的#root节点并包裹StrictMode以在开发期暴露潜在副作用问题。数据链路与权限模型从 SQL 到页面结合后端工程可以看清整条数据链路建表与种子数据up.sql 定义了movies表结构id自增主键 5 个业务字段并预置 4 条知名电影数据GraphQL 暴露Hasura 依据数据库表结构自动生成movies查询字段nhost.toml 中enableConsole true允许开发时在 Hasura Console 直接查看、调试该查询权限放行public角色的select_permissions使匿名请求可读全部列前端消费nhost.graphql.request携带subdomain: local客户端配置请求本地端点返回 JSON 后由 React 渲染。这条链路同样适用于后续扩展例如新增查询参数where/order_by、通过nhost.auth登录后携带 JWT 访问受保护字段或使用nhost.graphql.request发起mutation写入数据。进一步探索后端工程结构迁移与元数据位于 examples/quickstarts/backend/nhost密钥模板见 .secrets.examplenhost/nhost-js客户端源码packages/nhost-js/src包含createClient、graphql请求器与auth模块的完整实现与类型定义仓库内更多框架示例examples/quickstarts下还包含 nextjs、svelte、vue、reactnative 等前端框架的同构 Quickstart参考 examples/quickstarts 目录可与本文的 React 版本对照学习官方文档站点源码位于 docs 目录其中 docs/src/content 收录了 Nhost 的完整使用文档含 GraphQL、Auth、Storage 等模块的深入指南可作为继续学习的入口。本示例是 Nhost Quickstart 系列中 React 版本的标准实现代码量小、链路完整、无任何外部服务依赖非常适合作为「本地起后端 → GraphQL 取数 → 前端渲染」入门模板直接复制改造。【免费下载链接】nhostThe Open Source Firebase Alternative with GraphQL.项目地址: https://gitcode.com/GitHub_Trending/nh/nhost创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
使用 React 与 Nhost GraphQL 构建电影数据库：Nhost React Quickstart 实战指南
使用 React 与 Nhost GraphQL 构建电影数据库Nhost React Quickstart 实战指南【免费下载链接】nhostThe Open Source Firebase Alternative with GraphQL.项目地址: https://gitcode.com/GitHub_Trending/nh/nhost本篇文章以 examples/quickstarts/react 官方快速入门示例为核心完整演示如何在 React 前端中接入 Nhost 本地后端从启动nhost up拉起整套后端服务到用nhost/nhost-js客户端发起 GraphQL 查询最终把movies表数据渲染成响应式表格。读完本文你将掌握 Nhost 本地开发的最小闭环CLI 启动 → 数据库迁移 → GraphQL 查询 → React 渲染并理解客户端配置、后端权限与数据模型的对应关系。示例目标一个最小的电影数据库应用该 Quickstart 演示了用 React 与 Nhost 的 GraphQL API 构建一个简单的电影数据库应用其核心学习点包括使用nhost/nhost-js在 React 中配置 Nhost 客户端连接本地 Nhost 后端通过nhost up启动使用 GraphQL 查询获取数据将数据展示在响应式表格中。整个示例由两部分组成位于 examples/quickstarts/backend 的 Nhost 后端工程含 Hasura GraphQL 引擎、Postgres 数据库与movies表迁移以及位于 examples/quickstarts/react 的 Vite React 前端工程。快速开始三步跑通完整链路第一步启动本地 Nhost 后端在backend/目录即 examples/quickstarts/backend下执行cd ../backend cp .secrets.example .secrets nhost up其中.secrets.example是本仓库为后端提供的密钥模板内容包含GRAFANA_ADMIN_PASSWORD grafana-admin-password HASURA_GRAPHQL_ADMIN_SECRET nhost-admin-secret HASURA_GRAPHQL_JWT_SECRET 0f987876650b4a085e64594fae9219e7781b17506bec02489ad061fba8cb22db NHOST_WEBHOOK_SECRET nhost-webhook-secretnhost up会依据 nhost.toml 拉起完整后端栈。仓库还提供了 env-up.sh 脚本自动完成「若不存在.secrets则从模板复制」再执行nhost up的逻辑可以直接./env-up.sh替代手动两步。从 nhost.toml 可以看到本次示例锁定的服务版本与关键配置Hasurav2.46.0-ce通过adminSecret/jwtSecrets引用.secrets中的密钥devMode true、enableConsole true便于本地调试Auth0.38.1示例场景下邮箱密码登录启用、emailVerificationRequired true、密码最短 9 位同时配置了访问令牌 900 秒过期、刷新令牌 2592000 秒30 天过期等会话参数Postgres14.18-20250728-1Storage0.7.2。首次启动时Nhost CLI 会自动应用 migrations/default/1757318506781_movies/up.sql 中的迁移创建movies表并写入 4 条示例数据CREATE TABLE movies ( id SERIAL PRIMARY KEY, title VARCHAR(255) NOT NULL, director VARCHAR(255), release_year INTEGER, genre VARCHAR(100), rating FLOAT ); INSERT INTO movies (title, director, release_year, genre, rating) VALUES (Inception, Christopher Nolan, 2010, Sci-Fi, 8.8), (The Godfather, Francis Ford Coppola, 1972, Crime, 9.2), (Forrest Gump, Robert Zemeckis, 1994, Drama, 8.8), (The Matrix, Lana Wachowski, Lilly Wachowski, 1999, Action, 8.7);第二步安装依赖并启动前端npm install npm run dev前端工程 package.json 声明了关键依赖nhost/nhost-js以workspace:^形式引用仓库内 packages/nhost-js 的源码、react/react-dom^19.2.3、vite^8.0.16与vitejs/plugin-react。npm run dev实际执行 Vite 开发服务器npm run build与npm run preview用于生产构建与本地预览。第三步打开浏览器访问应用在浏览器中打开 http://localhost:51735173 是 Vite 开发服务器默认端口可在 vite.config.js 中按需调整server.port。页面将展示从本地 Nhost 后端 GraphQL API 拉取的电影列表表格。关键文件逐一拆解src/lib/nhost.jsNhost 客户端配置import { createClient } from nhost/nhost-js; export const nhost createClient({ subdomain: local, region: local, });这是全应用唯一的客户端配置点。createClient来自仓库内的nhost/nhost-js包源码位于 packages/nhost-js/src。与连接云端 Nhost 项目时填写真实subdomain/region不同这里固定为local表示连接本地nhost up启动的后端实例——Nhost CLI 会在本地暴露 GraphQL 端点客户端据此自动解析出对应的 Hasura GraphQL 地址。全局只需创建一次客户端实例并导出之后在任何组件中 import 复用。src/App.jsx主组件与 GraphQL 查询src/App.jsx 演示了 React Hooks 与 Nhost GraphQL 客户端组合的完整数据流import { useEffect, useState } from react; import { nhost } from ./lib/nhost; import ./App.css; function App() { const [movies, setMovies] useState([]); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchMovies async () { try { const resp await nhost.graphql.request({ query: query GetMovies { movies { title director release_year genre rating } }, }); setMovies(resp.body.data.movies || []); } catch { setError(Failed to fetch movies); } finally { setLoading(false); } }; fetchMovies(); }, []); ... }实现要点状态管理useState分别维护movies数据、loading加载态与error错误态useEffect空依赖数组在组件挂载时发起一次查询查询方式nhost.graphql.request({ query })是nhost/nhost-js提供的底层 GraphQL 请求入口直接传入 GraphQL 查询字符串响应体在resp.body.data中取movies数组存入状态容错处理查询失败时设置Failed to fetch movies错误信息finally中关闭加载态渲染时先判loading与error再渲染表格。查询的字段title/director/release_year/genre/rating与movies表列一一对应且能通过后端权限控制正常工作。在 public_movies.yaml 中可以看到示例为movies表配置了public角色的select_permissions允许匿名未登录读取全部列过滤条件为空{}——这正是前端无需登录即可查询数据的原因从源码结构看如需限制访问可在此处改为user角色并增加基于auth的过滤条件。表格渲染部分将每部电影映射为一行包含 Title、Director、Release Year、Genre、Rating 五列并使用数组索引作为 key源码中以biome-ignore注释说明这是 quickstart 场景下的刻意简化。src/main.jsxReact 入口src/main.jsx 使用 React 19 的createRootAPI 将App /挂载到index.html的#root节点并包裹StrictMode以在开发期暴露潜在副作用问题。数据链路与权限模型从 SQL 到页面结合后端工程可以看清整条数据链路建表与种子数据up.sql 定义了movies表结构id自增主键 5 个业务字段并预置 4 条知名电影数据GraphQL 暴露Hasura 依据数据库表结构自动生成movies查询字段nhost.toml 中enableConsole true允许开发时在 Hasura Console 直接查看、调试该查询权限放行public角色的select_permissions使匿名请求可读全部列前端消费nhost.graphql.request携带subdomain: local客户端配置请求本地端点返回 JSON 后由 React 渲染。这条链路同样适用于后续扩展例如新增查询参数where/order_by、通过nhost.auth登录后携带 JWT 访问受保护字段或使用nhost.graphql.request发起mutation写入数据。进一步探索后端工程结构迁移与元数据位于 examples/quickstarts/backend/nhost密钥模板见 .secrets.examplenhost/nhost-js客户端源码packages/nhost-js/src包含createClient、graphql请求器与auth模块的完整实现与类型定义仓库内更多框架示例examples/quickstarts下还包含 nextjs、svelte、vue、reactnative 等前端框架的同构 Quickstart参考 examples/quickstarts 目录可与本文的 React 版本对照学习官方文档站点源码位于 docs 目录其中 docs/src/content 收录了 Nhost 的完整使用文档含 GraphQL、Auth、Storage 等模块的深入指南可作为继续学习的入口。本示例是 Nhost Quickstart 系列中 React 版本的标准实现代码量小、链路完整、无任何外部服务依赖非常适合作为「本地起后端 → GraphQL 取数 → 前端渲染」入门模板直接复制改造。【免费下载链接】nhostThe Open Source Firebase Alternative with GraphQL.项目地址: https://gitcode.com/GitHub_Trending/nh/nhost创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
