無法在 GraphQL 突變中傳遞數組 - React Native

Question

我正在使用 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": [Object], "locations": [Array], "message": "virtualChallenge 驗證失敗: selectedUsers: Cast to Array failed for值 \\"[ '5e213e6ab76df200314f47c4,5e214493b76df200314f47fa' ]\\" 在路徑 \\"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 查詢中。 首選方法是利用變量，這些變量可以作為 GraphQL 服務將適當解析的 JSON 對象與您的查詢一起發送。

例如，代替

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

你會寫：

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

然后將name的值與您的請求一起傳遞：

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

為要動態注入查詢的每個參數值使用一個變量。 這比嘗試自己注入值更容易，因為您不必擔心特定於 GraphQL 的語法——您只是傳遞一個 JSON 對象。 但是，您需要知道以這種方式替換的每個參數的類型，因此您需要參考 GraphQL 服務的架構。