useMutation with array of objects

Hi, I have this mutation on server side it works with Playground. However it gives errors on client side. mutation { updateWorklogs( input: [ { id: "60c6b", week1: 1, week2: 2, week4: 9 }, { id: "60c6c", week1: 3, week2: 4, week4: 1.5 } ] ) { id year month name } }

Apollo Client tools show the mutation variables correctly as

Screenshot 2021-06-20 at 18.24.35

However in Apollo Client tools for chrome when I try to run the query it is showing as

I tried to run JSON.parse(myVariables) but no help. Apollo seems to convert it. And final result the query doesn’t run. It returns a 400 response, with not much else. It seems the issue may be resolved by introducing interface or a type on the Apollo Client, but I’m not sure how and where to do that!

How are you executing the query in you application? Can you share a snippet of code? The example of the variables in chrome seems fine, so perhaps there’s an error in your server code? Hard to tell without more details of how you’re making the query, what the types/inputs/resolvers for the query look like, etc.

1 Like

Thank you Joel,
Here is how I call it below and how I solved it :slight_smile:
I still have one last issue though, which is the necessary key prop for each child in React. I had it as id from MongoDB. Now as <tr key={${index}_${}}>, but it is still complaining and not sure why? My solution to previous problem mainly the lack of the mutation definition at top level, there was none and in these type of mutations it is required. I didn’t know we could use defined Input variable names like updateWorklogInput from server on our client. It is not mentioned anywhere either. So the below call works perfect. I just thought I’ll try it and also the $input variable names was not matching.

mutation updateWorklogs(
    $input: [updateWorklogInput]
  ) {
      input: $input
    ) {

Admin note: Formatted code block

Glad you solved it! RE: the React issue, what is the error you’re receiving?

1 Like

Thank you! Here is my function component with the key prop below (I also tried id and index with _ between) and the result is the same as below;
Warning: Each child in a list should have a unique “key” prop. index.js: 1

function Project({ project, admin }) { 
    return (
        <tr key={}>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w1" +} /></td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w2" +} /></td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w3" +} /></td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w4" +} /></td>

Put the key on the Project component instead. That’s the place it needs to go.

1 Like

Thank you amazing! Have a good day :slight_smile:

Sure thing, happy to help!

1 Like