如何从React向Express代理服务器传递GraphQL请求变量？

问题背景 #

现有一个Express代理服务器，用于转发GraphQL请求避免跨域问题，但目前请求中的variables是硬编码在Express中的，需要改为从React前端动态传递。

解决方案步骤 #

1. 修改Express服务器代码 #

首先需要让Express能解析JSON格式的请求体，然后从前端请求中提取variables，动态构建GraphQL请求数据。

修改后的完整Express代码：

const express = require("express"),
app = express(),
port = process.env.PORT || 4000,
cors = require("cors");

var axios = require('axios');

// 新增：解析JSON格式的请求体，否则无法获取req.body内容
app.use(express.json());
app.use(cors());
app.listen(port, () => console.log("Backend server live on " + port));

app.post("/api", (req, res) => {
  // 从React传递的请求体中获取variables参数
  const { variables } = req.body;

  // 动态构建GraphQL请求数据
  const graphqlData = JSON.stringify({
    query: `mutation claimTask ($taskId: String!, $assignee: String) {
      claimTask (taskId: $taskId, assignee: $assignee) {
          id
          name
          taskDefinitionId
          processName
          creationTime
          completionTime
          assignee
          variables {
              id
              name
              value
              previewValue
              isValueTruncated
          }
          taskState
          sortValues
          isFirst
          formKey
          processDefinitionId
          candidateGroups
      }
    }`,
    variables: variables
  });

  const config = {
    method: 'post',
    url: 'http://[my_ip]/graphql',
    headers: { 
      'Authorization': 'Bearer ey....', 
      'Content-Type': 'application/json', 
      'Cookie': 'TASKLIST-SESSION=..'
    },
    data: graphqlData
  };

  axios(config)
  .then(response => {
    console.log(JSON.stringify(response.data));
    // 直接返回原始响应对象，方便React端处理
    res.send({ message: response.data });
  })
  .catch(error => {
    console.log(error);
    // 返回错误状态码和清晰的错误信息
    res.status(500).send({ message: error.message || '代理请求失败' });
  });
})

2. 修改React端请求代码 #

在React的Axios请求中，通过data字段将variables传递给Express服务器：

import Axios from 'axios';

// 示例：在按钮点击事件中发起请求
const handleClaimTask = () => {
  // 可以从组件状态、表单输入或其他来源获取变量值
  const taskId = "22";
  const assignee = "demo";

  Axios({
    method: "POST",
    url: "http://localhost:4000/api",
    headers: {
      "Content-Type": "application/json"
    },
    // 将variables放入请求体中
    data: {
      variables: { taskId, assignee }
    }
  }).then(res => {
    // 直接访问GraphQL返回的结果
    console.log('任务认领结果:', res.data.message.claimTask);
  }).catch(err => {
    console.error('请求出错:', err);
  });
};

如果是带状态的组件，也可以将变量绑定到组件state：

import React, { useState } from 'react';
import Axios from 'axios';

function TaskClaimButton() {
  const [taskId, setTaskId] = useState("22");
  const [assignee, setAssignee] = useState("demo");

  const handleClaimTask = () => {
    Axios({
      method: "POST",
      url: "http://localhost:4000/api",
      headers: {
        "Content-Type": "application/json"
      },
      data: {
        variables: { taskId, assignee }
      }
    }).then(res => {
      console.log('任务认领成功:', res.data.message.claimTask);
    }).catch(err => {
      console.error('任务认领失败:', err);
    });
  };

  return (
    <div>
      <input type="text" value={taskId} onChange={(e) => setTaskId(e.target.value)} placeholder="任务ID" />
      <input type="text" value={assignee} onChange={(e) => setAssignee(e.target.value)} placeholder="认领人" />
      <button onClick={handleClaimTask}>认领任务</button>
    </div>
  );
}

export default TaskClaimButton;

额外优化建议 #

• 将GraphQL的query提取为单独常量，便于后续维护
• 在Express端添加参数校验，确保前端传递的variables包含必要的字段（如taskId）
• 可以将GraphQL的query也改为从前端传递，让代理服务器更通用

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