useMutation with array of objects

Help
,
1

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
{“input”:[{“id”:“60c6b9ca277c815ec200992a”,“week1”:5,“week2”:2,“week3”:0,“week4”:9},{“id”:“60c6ba80277c815ec200992e”,“week1”:0,“week2”:5,“week3”:0,“week4”:0}]}

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!

2

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
3

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}_${project.id}}>, 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]
  ) {
    updateWorklogs(
      input: $input
    ) {
      id
      projectId
      name
      year
      month
      week1
      week2
      week3
      week4
      totalMonth
      totalProject
    }
  }

Admin note: Formatted code block

4

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

1 Like
5

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={project.id}>
            <td>{project.name}</td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w1" + project.id} /></td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w2" + project.id} /></td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w3" + project.id} /></td>
            <td><input style={txtBox} type="number" placeholder="Hrs.." name={"w4" + project.id} /></td>
            <td>10</td>
        </tr>
    )
}
6

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

1 Like
7

Thank you amazing! Have a good day :slight_smile:

8

Sure thing, happy to help!

1 Like