无法在 GraphQL 突变中传递数组 - React Native答案

【问题标题】：Unable to pass array inside GraphQL mutation - React Native无法在 GraphQL 突变中传递数组 - React Native
【发布时间】：2020-05-05 13:23:14
【问题描述】：

我正在使用 GraphQL 构建 React Native 移动应用程序。现在我一直坚持在 GraphQL 突变中传递数组。我一直在使用 redux-thunk 作为中间件将数据传递给 GraphQL 突变。

我的 GraphQL 变异信息：

createVirtualChallenge(
name: String!
target: String!
image: String
description: String
from: String!
to: String!
selectedUsers: [String]
): VirtualChallengeResponse!

我一直将选定的用户作为一个数组传递，如下所示：

["5e2148d4b76df200314f4848", "5e213e6ab76df200314f47c4"]

我的redux thunk fetch函数是这样的

   fetch(URL.BASE_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + token,
        },
        body: JSON.stringify({
          query: `mutation{ createVirtualChallenge( name:"${name}", target:"${target}", image:"${image_name}", description:"${description}", from:"${from}", to:"${to}", selectedUsers: "${selectedUsers}" , ){ success } }`,
        }),
      })
        .then(res => res.json())

所有的值都通过使用 redux 的 props 传递。

如果数组长度为 1，则此突变有效。但如果数组长度大于 1，则 GraphQL 会抛出错误。

来自 URL 的响应 - {"data": null, "errors": [{"extensions": [对象]，“位置”：[数组]，“消息”：“虚拟挑战验证失败：selectedUsers：Cast to Array 值 \"[ '5e213e6ab76df200314f47c4,5e214493b76df200314f47fa' ]\" 在路径 \"selectedUsers\"", "path": [Array]}]}

【问题讨论】：

标签： javascript arrays react-native graphql mutation

【解决方案1】：

删除该参数的引号，因为引号用于包装字符串。因为它是一个数组，转换为相应的 JSON 字符串，这将是 graphql 的有效数组输入。

selectedUsers: "${selectedUsers}" ===> selectedUsers: ${JSON.stringify(selectedUsers)}

body: JSON.stringify({
  query: `mutation{ createVirtualChallenge( name:"${name}", target:"${target}", image:"${image_name}", description:"${description}", from:"${from}", to:"${to}", selectedUsers: ${JSON.stringify(selectedUsers)}  ){ success } }`,
}),

【讨论】：

感谢您的回答！我已经尝试过了，但它抛出了一个错误->“消息”：“语法错误：预期 :, found Float \"5e21465\""}]}
@AkilaDevinda : 你能打印字符串并分享吗
@AkilaDevinda: 这个值mutation{ createVirtualChallenge( name:"${name}", target:"${target}", image:"${image_name}", description:"${description}", from:"${from}", to:"${to}", selectedUsers: ${selectedUsers} ){ success } }
我已经使用 console.log 打印了我的数组 -> ["5e213e6ab76df200314f47c4", "5e214493b76df200314f47fa", "5e21465ab76df200314f4821"]
如果你需要注入一个有时需要为空的字符串值会发生什么？您最终会在查询中注入 "null" 而不是 null。如果你注入的值不是一个简单的标量而是一个输入对象类型会发生什么？ JSON.stringify 不会正确地将更复杂的值转换为 GraphQL 语法，因为 JSON 语法和 GraphQL 语法不兼容。即使这解决了您的请求，字符串插值也绝不是 GraphQL 查询的方式。

【解决方案2】：

您不应该使用字符串插值将值注入到 GraphQL 查询中。首选方法是使用变量，这些变量可以与查询一起作为 JSON 对象发送，GraphQL 服务将对其进行适当解析。

例如，代替

mutation {
  createVirtualChallenge(name: "someName"){
    success
  }
}

你会写：

mutation ($name: String!) {
  createVirtualChallenge(name: $name){
    success
  }
}

然后将name 的值与您的请求一起传递：

fetch(
  ...
  body: JSON.stringify({
    query: `...`,
    variables: {
      name: 'someName',
    },
  }),
)

为要动态注入查询的每个参数值使用一个变量。这比尝试自己注入值更容易，因为您不必担心特定于 GraphQL 的语法——您只是传递一个 JSON 对象。但是，您需要知道以这种方式替换的每个参数的类型，因此您需要参考 GraphQL 服务的架构。

【讨论】：

使用变量不适用于字符串数组。您对此有更好的解决方案吗？
@Swapnil 如果找不到解决方案，您可以打开一个包含所有相关详细信息的新问题。在不了解所有相关信息的情况下，无法告知您哪里出了问题。