Remix开发Shopify结账扩展获取折扣码时遇codeDiscountNodes undefined错误

错误原因分析 #

这个错误说明你尝试访问data.codeDiscountNodes时，data本身是undefined。常见触发场景：

• GraphQL请求失败，query函数未返回预期的data对象
• Shopify API权限不足，结账扩展没有访问codeDiscountNodes查询的权限
• useEffect执行逻辑有问题，导致请求未完成就尝试读取数据
• setState是异步操作，调用fetchDiscounts后立即打印disc时，状态还未更新

修复步骤及代码调整 #

1. 修正useEffect的执行逻辑
   给useEffect添加空依赖数组避免无限触发请求，同时通过监听disc状态变化打印结果，确保拿到最新数据：

   useEffect(() => {
     fetchDiscounts();
   }, []); // 空数组确保仅在组件挂载时执行一次
   
   useEffect(() => {
     console.log("Discount codes: ", disc);
   }, [disc]); // 当disc状态更新时打印
   

2. 加强数据安全校验
   对query返回值做多层可选链判断，避免因data不存在导致报错：

   async function fetchDiscounts() {
     try {
       const response = await query(`query {
         codeDiscountNodes(first: 3) {
           nodes {
             id
             codeDiscount {
               ... on DiscountCodeBasic {
                 title
                 summary
               }
               ... on DiscountCodeBxgy {
                 title
                 codeCount
               }
             }
           }
         }
       }`);
       
       // 先确认response和data存在，再读取节点数据
       const codeDiscountNodes = response?.data?.codeDiscountNodes?.nodes || [];
       setDisc(codeDiscountNodes);
     } catch (error) {
       // 打印完整错误信息，方便排查API问题
       console.error("获取折扣码失败:", error.message, error.response?.data);
     } 
   }
   

3. 检查Shopify API权限
   确认你的结账扩展在Shopify Partner后台配置了read_discounts权限——只有拥有该权限，才能访问codeDiscountNodes查询。如果权限不足，需更新扩展权限设置后重新部署。

4. 验证query函数的返回结构
   部分Shopify API工具库会将GraphQL响应嵌套多层，可先打印response确认实际结构：

   async function fetchDiscounts() {
     try {
       const response = await query(/* 你的查询语句 */);
       console.log("API响应:", response); // 查看实际返回结构
       // 后续处理逻辑...
     } catch (error) {
       console.error(error);
     }
   }
   

内容的提问来源于stack exchange，提问作者user2647092