前端缓存【免费下载链接】swrReact Hooks for Data Fetching项目地址https://gitcode.com/gh_mirrors/sw/swr点击查看免费下载导读本文基于 SWR 仓库中的 global-fetcher 示例讲解如何借助SWRConfigProvider 在应用顶层集中配置fetcher从而避免在每个useSWRHook 调用中重复传入请求函数。读完本文你将掌握全局 Fetcher 的配置方式、底层实现原理以及如何在 Next.js 的_app.js中落地这一方案。示例定位Global Fetcherexamples/global-fetcher/README.md 明确说明了该示例的核心思想Use theSWRConfigprovider to set up the fetcher globally instead of a per-hook call.即使用SWRConfigProvider 全局设置 fetcher而不是在每个 Hook 调用中逐个传入。这一做法可以让所有useSWR调用共享同一个请求函数显著减少重复代码。该示例基于 Next.js 构建依赖next、react、react-dom、swr见 examples/global-fetcher/package.json页面结构如下pages/_app.js在应用入口通过SWRConfig全局注入 fetcherlibs/fetch.js自定义的全局 fetcher 实现pages/index.js首页列表展示 Trending Projectspages/[user]/[repo].js仓库详情页展示 forks/stars/watchers 数据pages/api/data.js模拟延迟的 API 路由。一、快速启动下载示例并运行按照 README 提供的步骤可以先下载示例到本地curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip2 swr-main/examples/global-fetcher cd global-fetcher然后安装依赖并启动开发服务器支持 yarn 与 npm 两种方式yarn yarn dev # 或 npm install npm run devpackage.json中还提供了生产构建与启动命令npm run buildNext.js 构建与npm run start启动生产服务器。二、核心实现SWRConfig 全局配置2.1 全局注入 fetcher在 pages/_app.js 中示例通过 Next.js 的自定义 App 组件用SWRConfig包裹整个应用import React from react import App from next/app import { SWRConfig } from swr import fetch from ../libs/fetch.js; export default class MyApp extends App { render() { const { Component, pageProps } this.props return SWRConfig value{{ fetcher: fetch }} Component {...pageProps} / /SWRConfig } }关键点SWRConfig的value属性接受一个配置对象其中fetcher字段指定全局请求函数包裹之后应用内所有useSWR调用在未显式传 fetcher 时都会自动使用这个全局 fetcher由于_app.js是 Next.js 所有页面的公共入口因此这一配置对全部页面生效。2.2 自定义 fetcher 的实现全局 fetcher 定义在 libs/fetch.jsexport default async function fetcher(...args) { const res await fetch(...args) return res.json() }它接受任意参数...args透传给原生fetch并将响应解析为 JSON。这样页面中调用useSWR(/api/data)时SWR 会把 key即/api/data作为参数传给 fetcher自动完成请求与 JSON 解析。2.3 页面中使用全局配置在 pages/index.js 中useSWR只传入 key无需再写 fetcherimport useSWR from swr export default function Index() { const { data } useSWR(/api/data) // ... }详情页 pages/[user]/[repo].js 同样如此只需在 key 中带上查询参数const id typeof window ! undefined ? window.location.pathname.slice(1) : const { data } useSWR(/api/data?id id)这说明一旦配置了全局 fetcher所有useSWR调用都可以省略第二个参数代码更加简洁统一。三、底层原理SWRConfig 如何工作3.1 配置上下文与合并从源码看SWRConfig的公开入口定义在 src/index/config.ts它从_internal导入并重新导出SWRConfig。真正实现位于 src/_internal/utils/config-context.ts模块创建了SWRConfigContext createContextPartialFullConfiguration({})用于在 React 组件树中传递配置SWRConfig组件通过useContext(SWRConfigContext)读取父级配置并通过mergeConfigs(parentConfig, config)将父级配置与自身配置合并形成扩展后的配置配置支持函数形式value可以传入(parentConfig) config这样的函数useMemo会在依赖变化时重新计算见源码 config-context.ts。因此全局 fetcher 本质上是通过 React Context 在组件树顶层注入fetcher任意深层的useSWR都能通过上下文读取到它。3.2 fetcher 的解析顺序在useSWR的参数规范化过程中src/_internal/utils/normalize-args.ts 会区分三种调用形式export const normalize KeyType Key, Data any( args: | [KeyType] | [KeyType, FetcherData | null] | [KeyType, SWRConfiguration | undefined] | [KeyType, FetcherData | null, SWRConfiguration | undefined] ): [KeyType, FetcherData | null, PartialSWRConfigurationData] { return isFunction(args[1]) ? [args[0], args[1], args[2] || {}] : [args[0], null, (args[1] null ? args[2] : args[1]) || {}] }即当第二个参数是函数时它被当作 fetcher否则按配置对象处理。当useSWR只传入 key 时fetcher 为空SWR 会回退到配置上下文中解析出的全局 fetcher。这正好解释了 global-fetcher 示例中“省略 fetcher 也能工作”的原因——全局配置在参数解析后作为兜底生效。3.3 可继承与覆盖由于SWRConfig支持嵌套且会与父级配置合并你可以在全局设置一个默认 fetcher然后在局部如某个页面或组件内用另一个SWRConfig覆盖 fetcher实现灵活的分层配置。这是mergeConfigs合并逻辑带来的能力。四、深入理解配置合并的核心逻辑SWRConfig的合并行为由 src/_internal/utils/merge-config.ts 支撑mergeConfigs函数在此实现。其设计要点子级配置会覆盖父级同名配置项这种覆盖机制不仅适用于fetcher也同样适用于revalidateOnFocus、suspense、refreshInterval、dedupingInterval等其他 SWR 配置项。从类型定义看SWRConfigValue与FullConfiguration定义在 src/_internal/types.ts 中其中fetcher的类型为Fetcherany | null默认值在全局默认配置中为null。这意味着如果不配置全局 fetcheruseSWR调用就必须显式传入 fetcher否则请求不会执行。五、测试验证SWR 仓库针对全局配置与上下文行为编写了测试例如 test/use-swr-config.test.tsx 与 test/use-swr-context-config.test.tsx实现useSWR参数规范化normalize-args.ts在未传入 fetcher 时回退到全局配置。扩展能力嵌套SWRConfig支持局部覆盖可针对特定页面或组件调整请求行为。如需查看更多 SWR 用法可继续阅读仓库中其他示例例如 examples/basic、examples/global-fetcher 同级的 examples/infinite 等更完整的配置项说明可参考 src/_internal/types.ts。赞分享前端缓存【免费下载链接】swrReact Hooks for Data Fetching项目地址https://gitcode.com/gh_mirrors/sw/swr点击查看免费下载相关推荐5 分钟把 VSDX 搬进 drawio跨平台 Visio 转换实操5 分钟把 VSDX 搬进 drawio跨平台 Visio 转换实操 一个 .vsdx 送过来本机却装不了 Visio。drawio 桌面版可以直接导入它桌面应用图形学Nextra 文档站中的 SWRConfig 全局配置实战统一 SWR 数据请求行为Nextra 文档站中的 SWRConfig 全局配置实战统一 SWR 数据请求行为 导读 本文以 Nextra 仓库中的 SWR 官方文档站 exampl前端文档/教程SWR 全局 Suspense 模式实战用 SWRConfig 一处配置、全站享受 React SuspenseSWR 全局 Suspense 模式实战用 SWRConfig 一处配置、全站享受 React Suspense 导读 本文基于 SWR 官方示例 suspe前端缓存上一篇LangChain Extract扩展开发添加自定义文件格式支持下一篇Nextra构建难题终极指南从常见报错到快速解决方案的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考