React中如何从函数值动态传递参数到GraphQL变量？

你可以利用ES6的计算属性名特性来实现动态设置variables中的参数名，具体修改如下：

修改后的fetchData函数：

const fetchData = async (url, query, param, variable) => {
  return await axios.post(url, {
    query: query,
    variables: { [param]: variable } // 用方括号包裹param变量，实现动态键名
  })
};

原理说明 #

ES6的计算属性名允许在对象字面量中使用表达式作为属性名，把param变量放在方括号[]内后，JavaScript会自动将param的实际值解析为对象的键名，而非把param作为固定字符串键。

使用示例 #

比如调用函数时传入param: "userId"、variable: 123：

fetchData('/graphql', yourQuery, 'userId', 123)

此时请求体中的variables会被解析为：

{ "userId": 123 }

完全满足动态参数名的需求。

内容的提问来源于stack exchange，提问作者Devil's Dream