Gatsby v4.11.0 版本发布详解：gatsby-source-shopify v7 与 React 18 兼容支持

前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载本篇文章基于当前仓库中的 Gatsby v4.11 官方版本发布说明docs/docs/reference/release-notes/v4.11/index.md展开系统梳理该版本2022 年 3 月第三次发布版本号gatsby4.11.0的两大核心亮点gatsby-source-shopify从 V6 升级到 V7 的破坏性变更与迁移要点以及 Gatsby 对 React 18 SSR API 的 100% 兼容支持同时覆盖本版本的若干重要 bugfix 与改进项。读完本文你将掌握 Shopify 数据源插件 V7 的配置、查询与迁移方法并了解 React 18 在 Gatsby 中的使用前提。版本概览gatsby4.11.0发布于 2022 年 3 月 29 日属于 2022 年 3 月的第三次发布March 2022 #3。本次发布的关键亮点集中在两方面gatsby-source-shopifyv7由社区成员 Byron Hill 主导的重写PR #34049带来媒体、presentment 价格、显式类型定义等一批重要能力React 18 支持React 18 最新 RC 版本在 SSR API 上引入了破坏性变更本版本使 Gatsby 与之重新达到 100% 兼容为官方 React 18 正式发布做好了准备。此外还有一批值得关注的 bugfix 与改进见下文“Notable bugfixes improvements”小节。如果你希望提前体验尚未发布的新功能可以安装gatsbynext版本。gatsby-source-shopifyv7 重大版本更新gatsby-source-shopify在 v7 中经历了一次重写核心目标是与 Shopify 的 Admin API Schema 尽量对齐。其底层原理保持不变该插件通过 Shopify 的Bulk Operations API批量拉取数据从而能够处理大体量数据、保证构建过程的韧性resilient并支持增量构建——当你在 Shopify 后台修改数据时站点可以快速重建。这一点在该插件仓库的 README 中有明确说明。v7 带来的主要改进根据发布说明v7 版本引入了以下能力提升媒体查询扩展除了产品图片现在还可以查询产品视频含外部视频或 3D 模型字段顺序保持Variants、Images 等字段会保持你在 Shopify 后台定义的顺序Metafield 类型合并多种 metafield 类型合并为单一的 metafield 类型与 Shopify Admin API Schema 更对齐详见下文迁移指南Presentment 价格查询可以查询 presentment prices即按展示渠道/货币展示的价格显式类型定义并禁用类型推断即使你的商店没有任何产品或大量字段为null也不会破坏 Schema 或导致构建失败Schema 对齐 Shopify Admin API绝大多数情况下可以直接参考 Shopify 的官方文档来编写查询。显式类型定义禁用类型推断第 5 点是 v7 架构层面的重要变化。在源码层面插件通过createSchemaCustomization与dontInfer指令为每个实体显式声明 GraphQL 类型。以产品类型为例product-type.ts 中定义type ${prefix}Product implements Node dontInfer { id: ID! shopifyId: String! legacyResourceId: String! featuredMedia: ${prefix}Media link(from: _featuredMedia, by: id) media: [${prefix}Media!]! link(from: media___NODE, by: id) metafields: [${prefix}Metafield!]! link(from: metafields___NODE, by: id) options: [${prefix}ProductOption!]! priceRangeV2: ${prefix}ProductPriceRangeV2! variants: [${prefix}ProductVariant!]! link(from: variants___NODE, by: id) # ...更多字段 }dontInfer意味着 Gatsby 不再根据节点数据动态推断字段而是完全以这份显式 Schema 为准。这带来的直接收益正是发布说明中提到的空商店、全null字段都不会再导致 Schema 生成失败或构建中断构建过程因此更加稳健。媒体类型则通过interface ${prefix}Media联合ShopifyMediaImage、ShopifyExternalVideo、ShopifyVideo、ShopifyModel3d等具体类型见 media-type.ts其中MediaContentType枚举覆盖了VIDEO、EXTERNAL_VIDEO、MODEL_3D、IMAGE四种媒体内容类型。快速上手配置v7 插件的基础安装与配置来自 READMEnpm install gatsby-source-shopify gatsby-plugin-imagerequire(dotenv).config() module.exports { plugins: [ { resolve: gatsby-source-shopify, options: { password: process.env.SHOPIFY_APP_PASSWORD, storeUrl: process.env.GATSBY_MYSHOPIFY_URL, salesChannel: process.env.SHOPIFY_APP_ID, // 可选但推荐 }, }, gatsby-plugin-image, ], }其中GATSBY_MYSHOPIFY_URL是登录 Shopify 账号时使用的商店地址格式为my-unique-store-name.myshopify.com。插件选项详解v7 插件的选项校验定义在 plugin-options-schema.ts全部选项如下选项类型默认值说明storeUrlstring必填商店 URL格式my-unique-store-name.myshopify.com不带协议与斜杠源码中用正则/^[a-z0-9-]\.myshopify\.com$/校验passwordstring必填Shopify 商店 App 的 Admin 密码salesChannelstringprocess.env.GATSBY_SHOPIFY_SALES_CHANNEL \|\| 指定销售渠道后只拉取发布到该渠道的产品、变体、集合与位置想按 Private App 过滤时传 App ID 而非渠道名downloadImagesbooleanfalse为true时在构建期下载并处理图片否则回退到 Shopify CDNprioritizeboolean未设置覆盖构建优先级判定不设置时由环境变量决定见下文shopifyConnectionsstring[][]额外拉取的数据类型可选值为orders、collections、locationstypePrefixstring节点类型前缀如设为MyStore节点名变为allMyStoreShopifyProducts而非allShopifyProducts必须字母数字开头且首字母大写apiVersionstring随版本更新的最新 API 版本指定使用的 Shopify API 版本注意salesChannel选项默认取process.env.GATSBY_SHOPIFY_SALES_CHANNEL的值如果该值未设置插件只会拉取发布到online store销售渠道的数据。构建优先级判定由于 Shopify Bulk API 的限制同一时间一个 Shopify App 只能运行一个 bulk operation。为此插件内置了构建优先级判定逻辑通过环境变量判断当前是否为 Gatsby Cloud 或 Netlify 上的生产构建优先级构建可以暂停非优先级构建const isGatsbyCloudPriorityBuild CI true GATSBY_CLOUD true GATSBY_IS_PR_BUILD ! true const isNetlifyPriorityBuild CI true NETLIFY true CONTEXT production return pluginOptions.prioritize ! undefined ? pluginOptions.prioritize : isGatsbyCloudPriorityBuild || isNetlifyPriorityBuild如果你在gatsby-config中显式设置prioritize为true或false将覆盖环境变量的判定结果。图片与媒体查询v7 默认使用 Shopify CDN 配合gatsby-plugin-image。产品页面常见的媒体预览查询query { products: allShopifyProduct { nodes { media { preview { image { gatsbyImageData } } ... on ShopifyExternalVideo { embeddedUrl host } ... on ShopifyVideo { sources { format height url width } } } } } }如果希望在构建期下载图片同源提供、运行时加载更快但增加构建时长需要开启downloadImages: true并额外安装gatsby-plugin-sharp与gatsby-transformer-sharp{ resolve: gatsby-source-shopify, options: { password: process.env.SHOPIFY_APP_PASSWORD, storeUrl: process.env.GATSBY_MYSHOPIFY_URL, downloadImages: true, }, }, gatsby-plugin-image, gatsby-plugin-sharp, // downloadImages 为 true 时必选 gatsby-transformer-sharp, // downloadImages 为 true 时必选V6 到 V7 迁移指南要点迁移的核心是Schema 变更。v7 中所有来自 Shopify API 的id字段都被映射为shopifyIdid始终是 Gatsby 内部 IDSchema 完全静态类型化并尽可能贴近 Shopify GraphQL API。主要破坏性变更如下1.ShopifyProduct.images→ShopifyProduct.media旧版本在ShopifyProduct上暴露images字段导致无法支持视频与 3D 渲染新版本改为直接暴露media字段。迁移前shopifyProduct { images { gatsbyImageData } }迁移后shopifyProduct { nodes { media { ... on ShopifyMediaImage { image { gatsbyImageData } } } } }注意media字段返回的数据结构与images不同消费这些查询的组件代码通常也需要相应调整。2.ShopifyProductOption.id→shopifyIdshopifyProduct { options { # 每个 option 的类型为 ShopifyProductOption shopifyId } }3. Metafield 类型合并为单一ShopifyMetafield旧版本存在ShopifyProductMetafield、ShopifyCollectionMetafield、ShopifyProductVariantMetafield三种类型现在合并为单一的ShopifyMetafield类型同时Metafield.ownerType从string变为与 Shopify API 对齐的enum类型。查询方式由allShopifyProductMetafield { nodes { id value description ownerType } }改为语义等价allShopifyMetafield(filter: {ownerType: {eq: PRODUCT}}) { nodes { id value description value } }4. Locations 字段调整由于 Shopify API 内部 bug 导致 legacy locations 抛错ShopifyLocation.fulfillmentService.callbackUrl字段被移除待 Shopify 侧修复后重新加回。使用建议由于同一 Shopify App 同一时间只能运行一个 bulk operation官方建议每个商店至少准备两个 Shopify App——一个用于生产、一个用于本地开发以避免构建冲突。React 18 支持React 18 的最新 RC 版本在SSR API 中引入了破坏性变更。Gatsby 4.11.0 通过跟进这些变更重新达到 100% 兼容时机正好赶上 React 18 的官方正式发布2022 年 3 月 29 日。在 React 18 下你可以开始使用Suspense声明式地处理异步组件加载React.lazy组件级代码分割配合 Gatsby 已有的按页面/路由分割进一步优化加载Concurrent Mode并发模式新的渲染机制有助于提升大型 Gatsby 站点的交互响应速度。需要说明的是文章所依据的 v4.11 发布说明记录了当时 React 18 处于 RC 阶段、Gatsby 恢复兼容这一事实在当前仓库时间点React 18 已正式发布多年且本仓库还包含专门的 e2e-tests/react-19 测试目录说明生态已持续演进。若要在你自己的项目中使用 React 18 的这些能力请以当前gatsby包支持范围及 React 官方发布博客 中记录的能力边界为准。Notable bugfixes improvementsv4.11.0 还包含以下重要修复与改进gatsby修复 Windows 上清除缓存时的eperm问题PR #35154改进 Functions 的编译错误提示PR #35196gatsby-plugin-utils为 Image Service 增加对aspect ratio的支持PR #35087gatsby-source-mongodb新增可选的typePrefix选项用于覆盖默认的 dbName 前缀PR #33820gatsby-cli显式解析 babel preset tsPR #35153gatsby-plugin-preact修复 preact aliasPR #35156。其中gatsby-source-mongodb的typePrefix选项在源码中得到验证在 gatsby-node.js 中节点类型的生成使用pluginOptions.typePrefix ?? dbName即未配置typePrefix时回退到数据库名作为前缀其选项说明也出现在该插件的 README 中。该选项适用于需要以自定义前缀组织实体类型、避免多个数据库节点类型冲突的场景。总结Gatsby v4.11.0 是一个兼顾“能力升级”与“兼容性”的版本gatsby-source-shopifyv7 通过显式 Schema、媒体类型支持与 metafield 合并把 Shopify 数据源插件推向更接近 Shopify Admin API 的现代形态迁移时需重点处理images→media、id→shopifyId、metafield 合并三处 Schema 变更同时 Gatsby 及时跟进 React 18 RC 的 SSR API 变化为随后到来的 React 18 正式版铺平了道路。若需了解更完整的变更清单可查阅仓库根目录的 CHANGELOG.md 以及上一版本发布说明 v4.10 Release Notes。赞分享前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载相关推荐Gatsby 5.16.0 版本发布详解React 19 与 Node.js 24 官方支持Gatsby 5.16.0 版本发布详解React 19 与 Node.js 24 官方支持 导读 本文基于 Gatsby 官方 v5.16 发布说明 do前端静态站点Web框架用 Gatsby 与 gatsby-source-shopify 搭建 Shopify 电商站从数据接入到商品页面生成用 Gatsby 与 gatsby source shopify 搭建 Shopify 电商站从数据接入到商品页面生成 本文是一份基于 Gatsby 仓库内官前端静态站点Web框架Starship 安装完全速查跨系统命令与 Shell 接入一步到位Starship 安装完全速查跨系统命令与 Shell 接入一步到位 Starship 是一款用 Rust 编写的极速终端提示符支持任意 shell能在提前端静态站点Web框架上一篇ComfyUI-Manager缓存清理策略提升系统响应速度下一篇告别远程文件访问烦恼SSHFS-Win的Windows跨平台文件管理革命创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考