Shopify Remix应用：安装后通过API创建草稿订单及调用失败问题

问题分析 #

你当前的代码存在两个核心问题导致GraphQL调用失败：

• 未通过@shopify/shopify-app-remix提供的认证客户端发起请求，直接调用graphql函数无效
• 未使用await处理异步API请求，无法获取响应结果

正确实现方式 #

1. 初始化Shopify认证客户端 #

在afterAuth钩子中，必须通过shopify.clients.Graphql()或shopify.clients.Rest()创建绑定当前会话的客户端，它会自动处理店铺域名和accessToken的认证逻辑。

2. 使用GraphQL创建草稿订单 #

以下是完整的afterAuth钩子示例，包含草稿订单创建逻辑：

hooks: {
  afterAuth: async ({ session, shopify }) => {
    const { shop } = session;

    // 创建GraphQL认证客户端
    const graphqlClient = new shopify.clients.Graphql({ session });

    try {
      // 发起创建草稿订单的mutation请求
      const response = await graphqlClient.query({
        data: `
          mutation draftOrderCreate($input: DraftOrderInput!) {
            draftOrderCreate(input: $input) {
              draftOrder {
                id
                name
                status
              }
              userErrors {
                field
                message
              }
            }
          }
        `,
        variables: {
          input: {
            lineItems: [
              {
                variantId: "gid://shopify/ProductVariant/123456789", // 替换为实际变体ID
                quantity: 1
              }
            ],
            // 可选：关联客户信息
            customer: {
              email: "customer@example.com"
            }
          }
        }
      });

      // 处理响应结果
      const { draftOrder, userErrors } = response.data.draftOrderCreate;
      if (userErrors.length > 0) {
        console.error("创建草稿订单失败:", userErrors);
      } else {
        console.log("草稿订单创建成功:", draftOrder);
      }
    } catch (error) {
      console.error("GraphQL请求异常:", error);
    }

    // 你的原有逻辑：保存店铺信息、注册webhooks
    const shopData = {
      shop: shop,
      accessToken: session.accessToken,
      planId: 1
    };
    await prisma.shops.create({ data: shopData });

    await shopify.registerWebhooks({ session });
  },
},

3. 使用REST API创建草稿订单 #

如果偏好REST方式，可采用以下实现：

hooks: {
  afterAuth: async ({ session, shopify }) => {
    // 创建REST认证客户端
    const restClient = new shopify.clients.Rest({ session });

    try {
      // 发起POST请求创建草稿订单
      const response = await restClient.post({
        path: "draft_orders",
        data: {
          draft_order: {
            line_items: [
              {
                variant_id: 123456789, // 替换为实际变体数字ID
                quantity: 1
              }
            ],
            // 可选：关联客户信息
            customer: {
              email: "customer@example.com"
            }
          }
        }
      });

      console.log("REST创建草稿订单成功:", response.body.draft_order);
    } catch (error) {
      console.error("REST请求异常:", error);
    }

    // 你的原有逻辑
    const shopData = {
      shop: session.shop,
      accessToken: session.accessToken,
      planId: 1
    };
    await prisma.shops.create({ data: shopData });

    await shopify.registerWebhooks({ session });
  },
},

关键注意事项 #

• ID格式差异：GraphQL需使用gid://shopify/ProductVariant/[数字ID]格式，REST直接使用数字ID即可
• 权限检查：确保你的Shopify应用已申请write_draft_orders权限，否则API会返回权限错误
• 错误处理：必须添加try/catch捕获请求异常，同时处理Shopify返回的userErrors（GraphQL）或响应错误信息（REST）

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