React Native, GraphQL, Apollo - how to create batch insert mutation

Question

I need to create a batch insert mutation call in react native Here is my code. will you please solve my problem. I don't know where I have done a mistake. while onHandleSubmit data is not inserting in the table.

On submitting only am passing the array of object to the batch mutation call function.

 onHandleSubmit = () => {
      const TestResponse = [
{
        id:1,
        userId:123,
        testId:4321,
        itemId:43545,
        attempt:true,

},
{
        id:2,
        userId:123,
        testId:4321,
        itemId:43546,
        attempt:false,

}
];
      const { ResponseStudentTestTrack = [] } = this.props;
        ResponseStudentTestTrack(TestResponse);
  }

Appsync Shema:

type StudentTestTrack {
    id: ID!
    userId: ID!
    testId: ID!
    itemId: ID!
    attempt: String!
}

type StudentTestTrackConnection {
    items: [StudentTestTrack]
    nextToken: String
}

input CreateStudentTestTrackInput {
    id: ID!
    userId: ID!
    testId: ID!
    itemId: ID!
    attempt: String!
}

type Mutation { 
batchcreateStudentTestTrack(studentTest: [CreateStudentTestTrackInput]!): [StudentTestTrack]
}

Apollo call:

 graphql(CreateStudentTestTrack, {
    props: props => ({
      ResponseStudentTestTrack: TestResponse => props.mutate({
        variables: TestResponse,
        optimisticResponse: {
          __typename: 'Mutation',
          batchcreateStudentTestTrack: { ...TestResponse, __typename: 'CoursePatternStatus' },
        },
      }),
    }),
  }),

mutation :

export const CreateStudentTestTrack = gql`
mutation batchcreateStudentTestTrack{
  batchcreateStudentTestTrack(
    studentTest:[TestResponse]
  ) {
    id,
    userId,
    testId,
    itemId,
    attempt,
  }
}`;

What is the type of your `ResponseStudentTestTrack` which is coming from props? — Umair Ahmed, Nov 12 '18 at 09:52
it's an array of an object like below const TestResponse = [ { id:1, userId:123, testId:4321, itemId:43545, attempt:true, }, { id:2, userId:123, testId:4321, itemId:43546, attempt:false, } — Mageswari Radhakrishnan, Nov 12 '18 at 11:03
I dont understand then. How are you calling it like: `ResponseStudentTestTrack(TestResponse);` If its an array you need to use `concat` — Umair Ahmed, Nov 12 '18 at 11:06
yes we can able call ResponseStudentTestTrack through props.only concat values is passing via ResponseStudentTestTrack(TestResponse). — Mageswari Radhakrishnan, Nov 12 '18 at 11:38
Just i want know how to pass array of object value in this mutation call other than its working fine for me. export const CreateStudentTestTrack = gql` mutation batchcreateStudentTestTrack{ batchcreateStudentTestTrack( studentTest:[TestResponse] ) { id, userId, testId, itemId, attempt, } }`; — Mageswari Radhakrishnan, Nov 12 '18 at 11:39
Its throwing this warning while calling mutation F:\GIT\Raus\node_modules\react-native\Libraries\ReactNative\YellowBox.js:80 Missing field id in { "0": { "id": "670ee940-e676-11e8-887a-adaf1bf2b8bc", "userId": 92217, "testId": 1232 — Mageswari Radhakrishnan, Nov 12 '18 at 12:36
So there is something in your Schema which is required, and you're not passing it to the mutation I think — Umair Ahmed, Nov 12 '18 at 13:45
all the missing fields are available in my mutation call. I think did mistake in batch creation mutation i don't how to pass array values in the batch mutation that's my issue. — Mageswari Radhakrishnan, Nov 13 '18 at 05:16
I assume there's an APPSync API behind this schema. What the API is returning ? — Vasileios Lekakis, Nov 14 '18 at 05:14

Naveen Vignesh · Accepted Answer · 2018-11-15T07:22:30.837

There seems to something wrong with client side mutation. Try this.

export const CreateStudentTestTrack = gql`
mutation abc ( // could be anyname
  $studentTest: [CreateStudentTestTrackInput] // Type of input mentioned in graphql definition
) {
  batchcreateStudentTestTrack(studentTest: $studentTest) {
    id,
    userId,
    testId,
    itemId,
    attempt,
  }
}`;

Also try removing optimistic response inside your graphql parameter if don't need to update ui cache and if your mutation call is just for insert. Also I have updated the mutate object based on my solutions. Please look into it too.

graphql(CreateStudentTestTrack, {
    props: props => ({
      ResponseStudentTestTrack: TestResponse => props.mutate({
        variables: {
          studentTest: TestResponse
        },
      }),
    }),
  }),

Also check you destructuring code.

const { ResponseStudentTestTrack } = this.props; // don't set default value as array for a function prop.

Try this code and you face issues comment below.

React Native, GraphQL, Apollo - how to create batch insert mutation

1 Answers1