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

Question

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

我的 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 会抛出错误。

Response from the URL - {"data": null, "errors": [{"extensions": [Object], "locations": [Array], "message": "virtualChallenge validation failed: selectedUsers: Cast to Array failed for value \"[ '5e213e6ab76df200314f47c4,5e214493b76df200314f47fa' ]\" at path \"selectedUsers\"", "path": [Array]}]}

Answer 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 } }`,
}),

Answer 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 服务的架构。

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

Unable to pass array inside GraphQL mutation - React Native

javascript

arrays

mutation

graphql

react-native