PERN栈应用扫码支付完成后如何将React端跳转至支付成功页？

问题1：自有服务端REST回调能否向GraphQL发请求 #

完全可以，有两种成熟的落地方式：

• 直接调用Resolver逻辑（推荐）：因为REST回调接口和GraphQL服务都部署在你的Express服务上，不需要走额外的HTTP请求，拿到银行回调的订单号、支付状态等参数后，直接引入你写的支付状态更新的Resolver函数，传入参数执行即可，更新完成后直接触发GraphQL Subscription的发布逻辑，把支付结果推送给前端。
• 调用GraphQL HTTP接口：如果你的GraphQL服务是独立部署的，可以在REST回调接口里用axios/node-fetch发起请求调用，示例代码如下：

const axios = require('axios')
// 银行回调的处理接口
app.post('/api/bank-payment-callback', async (req, res) => {
  const { orderId, paymentStatus, sign } = req.body
  // 先校验回调签名，防止恶意请求
  if (!verifySign(req.body)) return res.status(400).send('invalid sign')
  // 调用GraphQL接口更新支付状态
  await axios.post('http://你的GraphQL服务地址/graphql', {
    query: `
      mutation UpdatePaymentStatus($orderId: ID!, $status: PaymentStatusEnum!) {
        updatePaymentStatus(orderId: $orderId, status: $status) {
          id
          status
        }
      }
    `,
    variables: {
      orderId,
      status: paymentStatus === 'success' ? 'SUCCESS' : 'FAILED'
    }
  })
  res.status(200).send('success')
})

问题2：更优的实现方案 #

根据你的业务体量可以选择不同的方案，按实现成本从低到高排序：

• 短轮询方案（小流量场景首选）：实现成本最低，不需要维护长连接。用户进入扫码支付页后，前端每隔2-3秒发起一次请求（可以是REST接口也可以是GraphQL查询）查询当前订单的支付状态，查询到支付成功后直接跳转至支付成功页，订单超时后自动停止轮询即可。适配日订单量低于1万的电商场景，性能完全够用。
• GraphQL Subscription方案（实时性要求高的中大型场景）：就是你提到的方案，用户进入扫码页后，前端订阅对应订单号的paymentStatusUpdated事件，服务端收到银行回调更新完订单状态后，调用pubsub.publish方法推送支付结果到对应订阅的前端，前端收到成功通知后直接跳转。需要注意做好订阅权限校验，避免用户接收到不属于自己的订单通知，还要处理长连接断开重连的问题。
• 原生WebSocket方案：如果你不想引入GraphQL Subscription的额外依赖，可以直接在Express服务上接入ws库实现WebSocket长连接，逻辑和Subscription一致，自主维护连接和消息推送即可。

通用注意事项 #

无论用哪种方案，都需要做两层校验：

1. 银行回调必须做签名校验，防止恶意请求篡改支付状态
2. 前端跳转支付成功页后，需要再主动调用一次接口查询订单状态，避免假成功的情况出现。

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