【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载本文是 howtographql 全栈教程 React urql 前端路线对应仓库 content/frontend/react-urql 目录的开篇实战指南。本路线要构建一个 Hackernews 克隆应用本篇文章将带你完成前端脚手架搭建、项目结构整理、urql 依赖安装、Client 与规范化缓存Graphcache配置并拉取现成的 GraphQL 后端、部署 Prisma 数据库服务最终在 GraphQL Playground 中完成第一次数据读写验证。读完本文你将掌握如何从零初始化一个接入 urql 的 React 项目并理解 urql 的 Exchange 架构与 Client 的工作方式。路线概览我们要构建什么在 0-introduction.md 中已经交代了整条教程路线的目标构建一个 Hackernews 克隆应用功能包括展示链接列表、搜索链接、用户注册与登录、登录用户创建链接、投票以及实时更新。技术选型如下前端React配合create-react-app脚手架、urql灵活的 GraphQL 客户端、urql/exchange-graphcache规范化缓存后端graphql-yogaGraphQL 服务器与 Prisma把数据库变成 GraphQL API 的层仓库背景说明howtographql 本身是一个基于 Gatsby 构建的开源全栈教程网站package.json 中可以看到gatsby1.0.0-beta、gatsby-transformer-remark等依赖start脚本即gatsby develop。教程正文全部以 Markdown 形式存放在 content 目录中本篇文章对应的正是 react-urql 路线的第一章。由于这是一条前端路线你不会花时间实现后端而是直接复用 Node 教程仓库中对应 content/backend/graphql-js 目录的最终服务端代码。因此本章的重心放在前端初始化与 urql 的接入上。前端用 create-react-app 创建 React 项目首先创建 React 项目。教程使用create-react-app脚手架它生成一个带完整构建配置的空白前端项目。如果尚未全局安装create-react-app先通过 yarn 安装yarn global add create-react-app注意本教程使用 Yarn 管理依赖。如果你更习惯使用 npm运行等价命令即可。然后用它来初始化应用create-react-app hackernews-react-urql该命令会创建名为hackernews-react-urql的新目录内含一套完整的、仅面向客户端的 React 应用配置。进入目录并启动应用验证一切正常cd hackernews-react-urql yarn start浏览器会自动打开http://localhost:3000看到默认的 React 欢迎页即表示项目跑起来了。整理项目结构为了让项目结构更清晰在src目录下创建两个子目录components存放所有 React 组件和styles存放所有 CSS 文件。App.js是组件把它移入componentsApp.css和index.css是样式移入styles。同时需要修改index.js与App.js中对这些文件的引用import React from react import ReactDOM from react-dom import ./styles/index.css import App from ./components/Appimport React from react import logo from ../logo.svg import ../styles/App.css调整后项目结构应如下. ├── README.md ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.test.js │ ├── components │ │ └── App.js │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── styles │ ├── App.css │ └── index.css └── yarn.lock准备样式Tachyons 自定义 CSS本教程的重点是 GraphQL 概念以及在 React 中的使用方式因此在样式上尽量少花时间。这里选用 Tachyons 这个 CSS 类库来减少手写 CSS 的工作量。打开public/index.html在已有的两个link标签下方添加第三个标签引入 Tachyonslink relmanifest href%PUBLIC_URL%/manifest.json link relshortcut icon href%PUBLIC_URL%/favicon.ico link relstylesheet hrefhttps://unpkg.com/tachyons4.2.1/css/tachyons.min.css/此外教程还准备了一份自定义样式。打开src/styles/index.css用以下内容整体替换body { margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; } input { max-width: 500px; } .gray { color: #828282; } .orange { background-color: #ff6600; } .background-gray { background-color: rgb(246,246,239); } .f11 { font-size: 11px; } .w85 { width: 85%; } .button { font-family: monospace; font-size: 10pt; color: black; background-color: buttonface; text-align: center; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; cursor: pointer; max-width: 250px; }这些工具类如.gray、.orange、.background-gray模仿了 Hackernews 的经典配色在后续章节构建链接列表、导航栏时会频繁用到。安装 urql 及其配套依赖接下来安装 urql 的核心库以及用于规范化缓存的 Exchangeyarn add urql urql/exchange-graphcache graphql graphql-tag各包的作用urql提供 urql 客户端本体包含 React hooks 与组件默认内置一个基础的文档缓存document cacheurql/exchange-graphcacheurql 默认缓存的替代品支持完整的规范化缓存稍后章节会配置它graphqlGraphQL 的参考实现urql 及其相关包会用到它的部分功能graphql-tag一个工具用于通过 ES6 标签模板字符串tagged template literals编写 GraphQL 查询定义补充关于 urql 的 Exchange 机制——从 urql 官方文档的定义来看每个 GraphQL 操作都会经过一条中间件链chain of middleware它可以对操作进行转换、过滤或直接完成fulfill它们。urql 的每一个核心特性包括请求发送fetching、去重deduplication和缓存caching都是用 Exchange 实现的。理解这一点是后续配置自定义缓存的关键。配置 urql 的 Clienturql 的核心是一个集中的Client实例。与直接处理 GraphQL 请求不同Client 负责控制操作何时发起、如何执行并处理去重deduplication、缓存caching和取消cancellation等细节。与 REST API 的工作方式相比使用 urql 时你不需要手动构造 HTTP 请求也不需要显式存储结果——只需要编写查询和变更然后通过 urql 的 React 绑定发送即可。在内部这些绑定只是调用了 Client 上的方法例如executeQuery和executeMutation。使用 urql 的第一步就是配置一个Client实例它需要知道 GraphQL API 的endpoint端点地址以处理网络连接。打开src/index.js整体替换为以下内容import React from react import ReactDOM from react-dom import ./styles/index.css import App from ./components/App import { Provider, Client, defaultExchanges } from urql const client new Client({ url: http://localhost:4000, exchanges: defaultExchanges }) ReactDOM.render( Provider value{client} App / /Provider, document.getElementById(root) )这段代码的含义从urql导入Client、Provider和defaultExchanges实例化一个新的Client传入你的端点url和defaultExchanges列表渲染 React 应用的根组件App被 urql 的 contextProvider包裹使整个组件树都能访问该 Client风格说明create-react-app生成的代码使用分号和双引号而本教程后续新增的代码不使用分号且大多使用单引号。两种风格共存并不影响运行你也可以顺手统一。这里defaultExchanges即使不显式传入也会被自动应用但下一步我们要接入规范化缓存所以先把它显式列出稍后替换。urql 的三大内置 Exchangeurql 默认会装配三个内置 Exchange它们共同构成 urql 的核心功能全部包含在defaultExchanges数组中dedupExchange对操作去重。如果同一时间发送相同的查询它会保证只有其中一个真正发往你的 APIcacheExchange缓存操作结果。这只是一个文档缓存document cache它按照请求结果的唯一 query variables 组合来缓存 GraphQL API 返回的结果fetchExchange使用fetch发送 GraphQL 请求默认支持取消操作如你所见urql 默认自带的只是一个简单的文档缓存。这种缓存对内容密集型的站点非常有用因为它把每个查询及其结果当作文档进行 1:1 的缓存。但对于更复杂的应用你很可能希望使用规范化缓存normalized caching——它能够确保当数据可以在多个查询之间共享时数据在整个应用内全局更新。接入 Graphcache 规范化缓存现在来配置规范化缓存。修改src/index.jsimport React from react import ReactDOM from react-dom import ./styles/index.css import App from ./components/App 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], }) ReactDOM.render( Provider value{client} App / /Provider, document.getElementById(root) )逐项说明这次改动现在从urql导入dedupExchange和fetchExchange并从urql/exchange-graphcache包引入cacheExchange通过调用cacheExchange目前传入一个空配置对象创建规范化缓存实例最后把Client上的defaultExchanges替换为包含规范化缓存的新 Exchange 列表。列表顺序很关键基本规则是fetch放最后、dedup放最前中间插入缓存 Exchange到这一步urql 的接入工作就完成了客户端知道 API 地址http://localhost:4000具备去重、规范化缓存、请求发送三大能力并且通过Provider注入到了整个 React 组件树中。从仓库视角看本教程后续章节如 2-queries-loading-links.md 会使用useQueryhook 加载数据、3-mutations-creating-links.md 会使用useMutation创建链接都是基于这里配置的 Client 进行的。这套 Provider Client Exchanges 的结构正是 urql 架构的核心。后端拉取现成的服务端代码如本章开头所述本路线直接复用 Node 教程的最终服务端项目。在终端中进入hackernews-react-urql目录并执行curl https://codeload.github.com/howtographql/react-urql/tar.gz/master | tar -xz --strip1 react-urql-master/server注意Windows 用户建议安装 Git CLI以避免curl等命令可能带来的问题。执行后项目内会出现名为server的新目录其中包含后端所需的全部代码。认识服务端结构启动服务器之前先快速理解主要组成部分prisma存放与 Prisma 相关的所有文件。Prisma Client 用于在 GraphQL resolver 中访问数据库类似 ORMprisma.ymlPrisma 项目的根配置文件datamodel.prisma用 GraphQL Schema Definition LanguageSDL定义数据模型使用 Prisma 时datamodel 用于描述数据库 schemasrc存放 GraphQL 服务器的源码schema.graphql包含应用 schemaapplication schema定义了可以从前端发送的 GraphQL 操作generated/prisma-client自动生成的 Prisma Client一个类型安全的数据库访问库类似 ORMresolvers包含应用 schema 中定义的操作所对应的 resolver 函数index.jsGraphQL 服务器的入口文件对于前端开发者而言上述文件中只有server/src/schema.graphql中的应用 schema 与你直接相关它定义了可以从前端应用发送的全部操作查询、变更和订阅。应用 schema 的内容如下# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from ./generated/prisma.graphql type Query { feed(filter: String, skip: Int, first: Int, orderBy: LinkOrderByInput): Feed! } type Feed { links: [Link!]! count: Int! } type Mutation { post(url: String!, description: String!): Link! signup(email: String!, password: String!, name: String!): AuthPayload login(email: String!, password: String!): AuthPayload vote(linkId: ID!): Vote } type AuthPayload { token: String user: User } type User { id: ID! name: String! email: String! } type Subscription { newLink: LinkSubscriptionPayload newVote: VoteSubscriptionPayload }这个 schema 支持以下操作查询Queriesfeed从后端获取所有链接注意该查询还支持过滤filter、排序orderBy和分页skip、first参数变更Mutationspost允许已认证用户创建新链接signup为新用户创建账号login登录已有用户vote允许已认证用户为已有链接投票订阅SubscriptionsnewLink新链接创建时实时接收更新newVote收到投票时实时接收更新例如可以发送下面的feed查询来获取服务器上前 10 条链接{ feed(skip: 0, first: 10) { links { description url postedBy { name } } } }或者用signup变更创建新用户mutation { signup( name: Sarah, email: sarahgraph.cool, password: graphql ) { token user { id } } }部署 Prisma 数据库服务在启动服务器并向它发送查询和变更之前还有一步关键操作Prisma 项目需要先部署GraphQL 服务器才能访问它。部署服务只需安装服务器依赖然后在server目录内执行prisma deploycd server yarn install yarn prisma deploy提示如果你已经全局安装了 Prisma CLI可通过yarn global add prisma安装可以省略命令中的yarn prisma直接运行prisma deploy。当被询问要将服务部署到哪里时选择Demo server需要登录可用 GitHub 账号登录然后选择一个region区域例如demo-us1或demo-eu1。Demo server 包含一个免费的 AWS Aurora 数据库实例如果本机装有 Docker也可以选择本地部署。注意命令运行结束后CLI 会把 Prisma API 的 endpoint 写入prisma.yml格式类似https://eu1.prisma.sh/john-doe/hackernews-node/dev。用 GraphQL Playground 探索服务器Prisma endpoint 就绪后就可以探索服务器了。进入server目录启动服务器yarn startyarn start执行package.json中定义的start脚本先启动服务器运行在http://localhost:4000然后打开一个 GraphQL Playground 供你探索和使用 API。Playground 是一种 GraphQL IDE提供交互式环境允许向 GraphQL API 发送查询、变更和订阅类似 REST 开发中熟悉的 Postman但具备更多额外能力。Playground 的两个关键特性内置 API 文档基于 GraphQL schema 自动生成。点击右侧边缘的绿色SCHEMA按钮即可打开展示的信息与上面的应用 schema 一致左右双栏布局左栏是editor编辑器用于编写查询、变更和订阅点击中间的播放按钮发送请求后服务器响应会显示在右侧的results结果栏中写入种子数据并验证把下面两个 mutation 复制到editor栏中确保左侧边栏选择的是app项目的defaultPlaygroundmutation CreatePrismaLink { post( description: Prisma turns your database into a GraphQL API , url: https://www.prismagraphql.com ) { id } } mutation CreateUrqlLink { post( description: The best GraphQL client for React, url: https://github.com/FormidableLabs/urql ) { id } }由于一次在编辑器中放入了两个 mutation它们必须有操作名operation names。这里分别是CreatePrismaLink和CreateUrqlLink。点击中间栏的Play按钮在下方下拉菜单中分别选择每个 mutation 各执行一次。这会向数据库写入两条新的Link记录。可以在当前打开的 Playground 中发送以下查询来验证 mutation 确实生效{ feed { links { id description url } } }注意也可以在app部分的defaultPlayground 中发送这个feed查询。如果一切顺利查询将返回如下数据id由 Prisma 生成且全局唯一你的结果中会不同{ data: { feed: { links: [ { id: cjcnfwjeif1rx012483nh6utk, description: The best GraphQL client, url: https://github.com/FormidableLabs/urql }, { id: cjcnfznzff1w601247iili50x, description: Prisma turns your database into a GraphQL API , url: https://www.prismagraphql.com } ] } } }服务器工作正常至此前端脚手架、urql Client、规范化缓存、后端服务器与数据库已全部就绪并打通。本章小结与后续章节在本章中你完成了用create-react-app初始化 React 项目并整理目录结构引入 Tachyons 与自定义样式安装urql、urql/exchange-graphcache、graphql、graphql-tag理解 urql 的 Client、Provider 与三大内置 ExchangededupExchange、cacheExchange、fetchExchange用urql/exchange-graphcache的cacheExchange替换默认文档缓存接入规范化缓存拉取并理解 GraphQL 后端应用 schema、Prisma 结构部署 Prisma 数据库服务并在 GraphQL Playground 中完成首次数据写入与查询验证接下来就可以真正开始在前端写业务代码了下一章 2-queries-loading-links.md 将使用useQueryhook 把链接数据加载进 React 组件再下一章 3-mutations-creating-links.md 将使用useMutation实现创建链接。整个 react-urql 路线的完整章节清单位于 content/frontend/react-urql 目录最终章 9-summary.md 对整条路线做了回顾总结。仓库补充信息在 src/data/stacks.ts 中可以看到一条被注释掉的React urql技术栈条目作者标注为 Formidable 的 Jovi Phil说明该路线在站点选择器中曾计划对外展示其对应的 urql 图标资源位于 src/assets/icons/urql.svg。如果你希望在本地运行整个 howtographql 站点Gatsby 应用可参考 README.md 中Installation Running locally一节的说明使用 Node 版本管理器安装.nvmrc指定版本、加载.env环境变量后执行yarn install yarn start站点默认运行在http://localhost:8000。赞分享【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载相关推荐urql 与 React 集成实战从零搭建基于 Client、Provider 与 useQuery 的 GraphQL 应用urql 与 React 集成实战从零搭建基于 Client、Provider 与 useQuery 的 GraphQL 应用 导读 本文以仓库 exampl前端create-react-app GraphQL集成Apollo Client配置和使用终极指南create react app GraphQL集成Apollo Client配置和使用终极指南 在现代前端开发中GraphQL已经成为数据获取的主流方案。前端开发工具CLI构建工具Snowpack React 模板实战用 create-snowpack-app 初始化 React 应用并完成开发、构建与测试Snowpack React 模板实战用 create snowpack app 初始化 React 应用并完成开发、构建与测试 本指南以仓库中 create前端开发工具前端构建创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
