Unable to pass array inside GraphQL mutation - React Native

Question

I was building React Native Mobile Application with GraphQL. Now I've been stuck with passing array inside GraphQL mutation. I have been using redux-thunk as middleware to pass data to GraphQL mutation.

My GraphQL mutation info:

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

I have been passing selected users as an array which looks like this :

["5e2148d4b76df200314f4848", "5e213e6ab76df200314f47c4"]

My redux thunk fetch function is like this

   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())

All the values are passing through props using redux.

If the array length is 1, then this mutation works.. But if the array length is greater than 1 then GraphQL throws an error.

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

Remove the quotes for that argument since the quote is using for wrapping String. Since it's an array convert into a corresponding JSON string and which will be valid array input for 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

You should never use string interpolation to inject values into a GraphQL query. The preferred way is to utilize variables, which can be sent along with your query as JSON object that the GraphQL service will parse appropriately.

For example, instead of

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

you would write:

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

and then pass the value for name along with your request:

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

Utilize a variable for each argument value you want to dynamically inject into your query. This is easier than trying to inject the values yourself since you don't have to worry about GraphQL-specific syntax -- you're just passing along a JSON object. You will, however, need to know the type for each argument you are replacing this way, so you'll need to refer to your GraphQL service's schema.