Shopify / Hydrogen脚手架搭建、爆红解决

（博客内容主要记录笔者遇到的许多麻烦 / 经验，并不一定完全正确、感谢大家的指正/补充）

‍

我对Shopify的理解

类WordPress、提供非常完整的电商后端、管理后台、一键管理商品、订单、客户、数据分析；接入收款方式

‍

为什么要用Hydrogen框架？

笔者一开始是使用Liquid语法写前端，遇到许多问题：官网文档不清晰、内置主题可读性非常差（官方为了兼容性写了太多代码）、很难修改、不方便调试（部分内置变量打印不出来）

直到需要开发一个实时定制商品功能时，发现Liquid行不通（内置 api 拿不到商品元数据），只好弃用Liquid项目，使用官方提供的Hydrogen脚手架重构项目

‍

使用Hydrogen框架构建无头前端

（无头前端 = 前端，二者没有差别）

官方文档：https://shopify.dev/docs/storefronts/headless

‍

1. 安装Hydrogen应用

商店 👉 应用 👉 Hydrogen

‍

2. 创建在线店面

创建成功，我们跟随指引创建脚手架项目

‍

3. 跟随指引新建脚手架项目并连接到商店

创建：npm create @shopify/hydrogen@latest
连接：npx shopify hydrogen link

使用创建命令后遇到两个选项：

选项一使用模拟数据

这里根据你熟悉的技术栈选择，都不熟悉就按笔者这套来

‍

选项二直接连接商店并使用商店数据

选择第二个选项后会打开浏览器，点击确认并登录即可完成连接

连接成功，选择具体的商店（一个账号可以创建多个商店，笔者的账号下有三个商店，所以有三个选项）

有时会遇到奇葩报错，试试修改网络环境，或者重新执行命令（多试几遍吧，只有这招了=-=）

‍

创建成功👇

‍

正片开始，解决爆红

先下载依赖👇

npm i

‍

1. 熟悉项目架构

初看很懵，实际上需要重点了解的只有两个技术栈：GraphQL和React Router v7

React Router v7官方文档：https://reactrouter.com/start/framework/installation（项目使用文件路由，直接看framework路由模式即可）

GraphQL看 .graphqlrc.ts这个配置文件，它负责告诉ide去哪获取“GraphQL版本的 API文档”，配合GraphQL插件，可以为代码提供语法提示和高亮（增删改查代码则分散在路由模块app / routes、app / graphql文件夹中）

看到 .graphqlrc.ts 文件，它导出了一个graphqlConfig，重点看里面的内容

graphqlConfig中，有两个projects，一个是default，一个是customer，刚好对应了Shopify提供的两种API：Storefront API、Customer API

API介绍：https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching

再往里看，default的documents指示整个项目以（ts,tsx,js,jsx）为后缀的文件，但是排除了 ./app/graphql/**/*.{ts,tsx,js,jsx} 文件夹，这个文件夹是Customer API的，在customer的documents中可以看到

‍

2. 两个爆红

第一个是React Router v7中的类型提示爆红，随意打开 app / routes 文件夹下的页面就能看到

路由模块的 loader函数用于发送请求，获取数据，但是useLoaderData钩子并不知道数据的类型是什么，没法提供typescript语法提示，+types文件夹负责这个，他由react router在项目运行时自动生成，放在.react-router文件夹中

‍

解决报错，只需要修改引入文件处的文件名即可

import type {Route} from './+types/_index';
修改后👇
import type {Route} from './+types/($locale)._index';

‍

第二个爆红我们划到 $(locale)._index.tsx 文件的末尾可以看到，发现类型提示出了问题（如果你看到的是一片绿色，是因为你没有安装GraphQL插件，ide把他识别为字符串了）

打开GraphQL插件，发现API没有被正确识别

打开配置文件，提示无法评估配置

点击堆栈跟踪，报错提示需要安装ts-node包

npm install --save-dev ts-node

点击重新加载，架构被正确识别，爆红问题解决

其他官方文档

Liquid：https://shopify.dev/docs/api/liquid

Hydrogen：https://shopify.dev/docs/storefronts/headless

Storefront API、Custom API概览：https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching

Custom-API：https://shopify.dev/docs/api/customer/latest

React Router v7官方文档：https://reactrouter.com/start/framework/installation

‍