AWS AppSync GraphQL -- Nested Input Tyes

Question

I'm trying to use a GraphQL Input Type inside another Input Type (AKA a nested Input Type) for a GraphQL mutation via aws-appsync's Apollo Client, inside my React-Native app.

input S3ObjectInput {
    bucket: String!
    key: String!
    region: String!
    localUri: String
    mimeType: String
}

input UpdateUserInput {
    cognitoId: ID!
    firstName: String
    lastName: String

    ...

    profilePictureInput: S3ObjectInput
}

type User @aws_cognito_user_pools {
    cognitoId: ID!
    firstName: String!
    lastName: String!
    
    ...
    
    profilePicture: S3Object
}

type S3Object @aws_cognito_user_pools {
    bucket: String!
    key: String!
    region: String!
}

type Mutation {
    updateUser(input: UpdateUserInput!): User
        @aws_cognito_user_pools
}

const updateUser = gql`
  mutation updateUser($input: UpdateUserInput!) {
    updateUser(input: $input) {
      cognitoId
      firstName
      lastName
      
      ...
      
      profilePicture {
        bucket
        key
        region
      }
    }
  }
`;

Finally, here's the TypeScript code I use to execute the mutation:

const appSyncClient = new AWSAppSyncClient({
  url: Amazon.graphQLEndpointUrl,
  region: Amazon.region,
  disableOffline: true,
  auth: {
    type: Amazon.graphApiAuthentication,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
  complexObjectsCredentials: () => Auth.currentCredentials(),
});


static async updateUser(user: User) {
    try {
      let response = await appSyncClient.mutate({
        mutation: mutations.updateCaptain,
        variables: {
          input: {
            cognitoId: user.cognitoId,
            profilePictureInput: {
                bucket: user.bucket,
                key: user.key,
                region: user.region,
                localUri: user.localUri,
                mimeType: user.mimeType,
            }
          },
        },
      });

      return User.getUserFromAppSyncResponse(response, 'updateUser');
    } catch (error) {
      console.log('Api.updateUser error', error);
    }
}

This returns the following error:

[Error: Network error: GraphQL error: Invalid attempt to iterate non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.]

This only happens when attempting to nest the S3ObjectInput inside the UpdateUserInput type. If I remove that nested field the error goes away, and everything else in the update mutation works fine.

So, my question is, how is the nesting of Input Types achieved, for GraphQL mutations, to an AWS AppSync API, from a React-Native app?

AWS AppSync GraphQL -- Nested Input Tyes

0 Answers0