【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载本篇指南来自 howtographql 仓库的 React urql 前端教程Hackernews Clone 项目核心讲解如何用 urql 以声明式方式执行 GraphQL 查询从编写最简单的Link/LinkListReact 组件开始到用gql定义feed查询、通过useQuery钩子发送请求最终把服务端数据渲染到页面并正确处理加载中fetching与错误error状态。读完本篇你将掌握 urql 查询体系的完整调用链Client → Exchanges → Hooks能够独立在自己的 React 应用中接入任意 GraphQL API。本讲在教程中的位置本篇对应仓库中的 2-queries-loading-links.md是 React urql 教程的第 2 章。在此之前1-getting-started.md 已经完成了三件准备工作用create-react-app创建了hackernews-react-urql前端项目并建立了src/components与src/styles目录结构安装了urql、urql/exchange-graphcache、graphql、graphql-tag四个依赖在src/index.js中配置了 urql 的Client指向http://localhost:4000并用Provider注入到整个 React 组件树后端方面则下载了 Node 教程的server目录部署了 Prisma 数据库服务通过 Playground 创建了两条 Link 记录。本讲要做的就是让前端真正开口向这个 GraphQL API 要数据并把数据渲染出来。整个过程中你会看到 urql 最核心的设计操作Operation经由 Exchanges 中间件链处理Hooks 只是 Client 的便捷封装。第一步准备 React 组件本讲第一个功能是加载并展示一组Link元素。按照组件自底向上的顺序先编写渲染单个链接的组件。在src/components目录新建Link.jsimport React from react const Link ({ link }) ( div div {link.description} ({link.url}) /div /div ) export default Link这是一个极简组件从props中接收一个link对象渲染其description与url两个字段。教程特意使用两层div嵌套——不追求语义化 HTML纯粹为后续章节的 Tachyons 样式预留挂载点。接下来编写渲染链接列表的LinkList组件同样放在src/components目录下import React from react import Link from ./Link const linksToRender [ { id: 1, description: Prisma turns your database into a GraphQL API , url: https://www.prismagraphql.com, }, { id: 2, description: The best GraphQL client, url: https://formidable.com/open-source/urql/, }, ] const LinkList () ( div {linksToRender.map(link Link key{link.id} link{link} /)} /div ) export default LinkList这里先硬编码了一份linksToRender模拟数据用于验证组件链路是否通畅——稍后会用服务端真实数据替换它。注意key{link.id}是 React 列表渲染的必备属性。最后修改src/components/App.js让应用渲染LinkListimport React from react import LinkList from ./LinkList const App () LinkList / export default App运行yarn start浏览器打开http://localhost:3000页面应显示linksToRender数组中的两条链接说明组件树搭建成功。第二步编写 GraphQL 查询接下来要让应用读取数据库中真实的 Link 数据。首先需要定义要发送的 GraphQL 查询{ feed { links { id createdAt description url } } }这份查询针对的是应用层 schemaapplication schema。回顾 1-getting-started.md 中展示的server/src/schema.graphqlfeed查询的定义如下type Query { feed(filter: String, skip: Int, first: Int, orderBy: LinkOrderByInput): Feed! } type Feed { links: [Link!]! count: Int! }也就是说feed返回一个Feed对象其links字段是非空数组每个元素包含id、createdAt、description、url等字段它同时还支持filter、skip、first、orderBy参数本讲暂不使用后续分页与过滤章节会用到。查询可以先用 GraphQL Playground后端yarn start后在http://localhost:4000打开直接执行验证再接入前端。第三步理解 urql 的查询机制用 urql 发送查询有两条路径底层命令式 API 与 React 声明式 Hooks。理解这两层关系是掌握 urql 的关键。底层 APIexecuteQuery 与 Wonka 流urql 的 React 绑定内部会调用Client上的方法这些方法返回一个结果流stream of results。三个核心方法是executeQuery、executeMutation、executeSubscription返回的结果流基于 Wonka 库实现。直接使用它们比 React 绑定略啰嗦但能看清底层机制import { createRequest } from urql import { pipe, subscribe } from wonka const request createRequest(gql { feed { links { id } } } , { // ... variables }); pipe( client.executeQuery(request), subscribe(response { console.log(response.data.feed); }) );流程是用createRequest把「查询文档 变量」打包成请求对象 → 交给client.executeQuery得到 Wonka 流 → 通过pipesubscribe订阅每个结果。声明式 API三个 Hooks对 React 开发者而言更常用的是 urql 的 Hook API。根据操作类型urql 提供三个对应的 Hooks 以及带 render-prop 的同名组件useQuery—— 查询useMutation—— 变更useSubscription—— 订阅这些 Hooks 是 urqlClient的便捷封装它们自动处理请求取消、结果更新、初始状态设置。向useQuery传入query选项可选传入variablesHook 内部会通知 Client 执行查询缓存cache则能在数据变化或缓存失效时主动向组件推送更新。urql 官方的设计理念是核心功能全部通过 Exchanges 实现。回顾 1-getting-started.md 中的 Client 配置import { Provider, Client, dedupExchange, fetchExchange } from urql import { cacheExchange } from urql/exchange-graphcache const cache cacheExchange({}) const client new Client({ url: http://localhost:4000, exchanges: [dedupExchange, cache, fetchExchange], })这里手动组装了三个 ExchangesdedupExchange对同一时刻的相同查询去重、cacheExchange来自urql/exchange-graphcache的规范化缓存替代默认的文档缓存、fetchExchange用fetch发送请求并支持取消。顺序有讲究——dedup在最前、fetch在最后。你在组件里调用useQuery时请求会依次经过这条链最终由fetchExchange发往http://localhost:4000。概括而言用 urql 添加数据获取逻辑通常遵循同一套三步流程用gql解析函数把查询写成 JavaScript 常量调用useQuery钩子传入{ query, variables }解构钩子返回的结果const [result] useQuery(...)。第四步把查询接入 LinkList 组件先打开LinkList.js在文件顶部定义查询常量const FEED_QUERY gql { feed { links { id createdAt url description } } } 然后改造LinkList组件调用useQueryconst LinkList () { useQuery({ query: FEED_QUERY }); return ( div {linksToRender.map(link Link key{link.id} link{link} /)} /div ); };这里发生了两件事FEED_QUERY用gql函数解析包含 GraphQL 代码的字符串反引号语法是 JavaScript 的标签模板字符串graphql-tag依赖的作用就在于此在组件中调用useQuery把FEED_QUERY传给query选项。注意示例仍然返回linksToRender模拟数据——此时还只是发起了请求尚未消费useQuery的结果。为了让代码运行还需要在文件顶部补齐两行导入import { useQuery } from urql import gql from graphql-tag到这一步全部取数代码就完成了。刷新应用可以看到已经有请求发往 GraphQL API可在浏览器 Network 面板验证但页面仍显示模拟数据。第五步渲染服务端真实数据现在删除linksToRender模拟数据改为消费useQuery的返回结果const LinkList () { const [result] useQuery({ query: FEED_QUERY }) const { data, fetching, error } result if (fetching) return divFetching/div if (error) return divError/div const linksToRender data.feed.links return ( div {linksToRender.map(link Link key{link.id} link{link} /)} /div ) }逐一拆解这段代码useQuery返回一个数组第一个元素是result。之所以是数组而非对象是因为 urql 所有 Hooks 的第二个值永远是execute函数可用于手动重新执行查询/变更result的三个核心属性完整描述了查询状态属性含义fetching请求进行中、响应尚未到达时为true否则为falseerror请求失败时包含一个CombinedError对象说明具体出错原因根据错误类型它带有networkError网络层错误或graphQLErrorsGraphQL 层错误属性data服务端返回的实际数据由于FEED_QUERY请求了links字段这里会有links属性值为Link元素列表渲染前用fetching/error做守卫分别渲染 Fetching 与 Error 占位内容这是 GraphQL 前端应用的常见模式数据就绪后data.feed.links即为链接数组与之前模拟数据形状一致Link组件无需任何改动。完成后刷新页面http://localhost:3000上应显示与之前完全相同的两条链接——只是数据来源从本地数组换成了 GraphQL API即 1-getting-started.md 中通过 Playground 创建的 The best GraphQL client 与 Prisma turns your database into a GraphQL API 两条记录。运行与排错要点如果浏览器访问http://localhost:4000只显示 error 且页面空白多半是后端没有运行。注意这个应用需要两个进程同时运行一个 GraphQL 服务器http://localhost:4000一个 React 应用http://localhost:3000。启动服务器的方法是进入server目录执行yarn startcd server yarn start小结与下一步本讲完成了两件事创建了Link与LinkList组件通过useQuery钩子从 GraphQL API 加载 feed 数据并渲染。同时你已理解 urql 查询的完整链路useQueryHooks 封装→Client.executeQuery操作执行→ Exchanges 链去重、规范化缓存、fetch 发送→ 返回结果流最终以fetching/error/data三个状态驱动 UI。后续章节将沿着同一条路径继续深入发送变更用 3-mutations-creating-links.md 的useMutation路由与重定向见 4-routing.md关于useQuery的requestPolicycache-first、cache-only、network-only、cache-and-network以及缓存更新机制可参考 7-pagination-and-cache-updates.md。feed查询的完整能力过滤、分页、排序则对应后端教程的 8-filtering-pagination-and-sorting.md。赞分享【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载相关推荐HowToGraphQL React Apollo 实战用 useQuery 钩子通过 GraphQL 查询加载并渲染链接列表HowToGraphQL React Apollo 实战用 useQuery 钩子通过 GraphQL 查询加载并渲染链接列表 本篇指南基于 HowToG在 Preact 中使用 urqlurql/preact 的安装、Provider 配置与 useQuery 组合式 GraphQL 数据流实战在 Preact 中使用 urqlurql/preact 的安装、Provider 配置与 useQuery 组合式 GraphQL 数据流实战 urql前端urql 实战在 React 中增量渲染 defer 与 stream 指令的延迟/流式 GraphQL 响应urql 实战在 React 中增量渲染 defer 与 stream 指令的延迟/流式 GraphQL 响应 本篇指南以仓库 examples/with前端上一篇3步构建你的跨设备游戏王国Sunshine游戏串流实战指南下一篇5分钟上手专业级AI换脸roop-unleashed深度伪造工具终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
