GraphQL Call on Many-to-many Relationship Does Not Return Related Items

[desert-digital]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

Amplify CLI

Environment information

# Put output below this line
  System:
    OS: macOS 12.7.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 2.49 GB / 16.00 GB
    Shell: 6.21.00 - /bin/tcsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 1.22.22 - ~/Development/Javascript/compass/compass-frontend/node_modules/.bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 9.11.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.60
    Safari: 17.6
  npmPackages:
    @angular-devkit/build-angular: ^18.2.6 => 18.2.6 
    @angular-eslint/builder: ^18.2.0 => 18.3.1 
    @angular-eslint/eslint-plugin: ^18.2.0 => 18.3.1 
    @angular-eslint/eslint-plugin-template: ^18.2.0 => 18.3.1 
    @angular-eslint/schematics: ^18.2.0 => 18.3.1 
    @angular-eslint/template-parser: ^18.2.0 => 18.3.1 
    @angular/animations: ^18.2.6 => 18.2.6 
    @angular/cdk: ^18.2.6 => 18.2.6 
    @angular/cli: ~18.2.6 => 18.2.6 
    @angular/common: ^18.2.6 => 18.2.6 
    @angular/compiler: ^18.2.6 => 18.2.6 
    @angular/compiler-cli: ^18.2.6 => 18.2.6 
    @angular/core: ^18.2.6 => 18.2.6 
    @angular/forms: ^18.2.6 => 18.2.6 
    @angular/material: ^18.2.5 => 18.2.6 
    @angular/platform-browser: ^18.2.6 => 18.2.6 
    @angular/platform-browser-dynamic: ^18.2.6 => 18.2.6 
    @angular/router: ^18.2.6 => 18.2.6 
    @aws-amplify/api: ^6.0.28 => 6.0.51 
    @aws-amplify/api/internals:  undefined ()
    @aws-amplify/api/server:  undefined ()
    @aws-amplify/auth: ^6.0.27 => 6.4.2 
    @aws-amplify/auth/cognito:  undefined ()
    @aws-amplify/auth/cognito/server:  undefined ()
    @aws-amplify/auth/enable-oauth-listener:  undefined ()
    @aws-amplify/auth/server:  undefined ()
    @aws-amplify/core: ^6.0.27 => 6.4.2 
    @aws-amplify/core/internals/adapter-core:  undefined ()
    @aws-amplify/core/internals/aws-client-utils:  undefined ()
    @aws-amplify/core/internals/aws-client-utils/composers:  undefined ()
    @aws-amplify/core/internals/aws-clients/cognitoIdentity:  undefined ()
    @aws-amplify/core/internals/aws-clients/pinpoint:  undefined ()
    @aws-amplify/core/internals/providers/pinpoint:  undefined ()
    @aws-amplify/core/internals/utils:  undefined ()
    @aws-amplify/core/server:  undefined ()
    @aws-amplify/storage: ^6.0.27 => 6.6.7 
    @aws-amplify/storage/s3:  undefined ()
    @aws-amplify/storage/s3/server:  undefined ()
    @aws-amplify/storage/server:  undefined ()
    @aws-amplify/ui-angular: ^5.0.26 => 5.0.26 
    @types/d3: ^7.4.0 => 7.4.3 
    @types/jasmine: ~4.3.2 => 4.3.6 
    @typescript-eslint/eslint-plugin: ^8.0.0 => 8.7.0 
    @typescript-eslint/parser: ^8.0.0 => 8.7.0 
    amplify: ^0.0.11 => 0.0.11 
    angular: ^1.8.3 => 1.8.3 
    aws-amplify: ^6.0.28 => 6.6.2 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    chart.js: ^4.3.0 => 4.4.4 
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    d3: ^7.8.5 => 7.9.0 
    eslint: ^9.11.0 => 9.11.1 
    jasmine-core: ~5.0.0 => 5.0.1 (4.6.1)
    karma: ~6.4.2 => 6.4.4 
    karma-chrome-launcher: ~3.2.0 => 3.2.0 
    karma-coverage: ~2.2.0 => 2.2.1 
    karma-coverage-coffee-example:  1.0.0 
    karma-jasmine: ~5.1.0 => 5.1.0 
    karma-jasmine-html-reporter: ~2.1.0 => 2.1.0 
    ng2-charts: ^4.1.1 => 4.1.1 
    npm-check-updates: ^16.10.12 => 16.14.20 
    rxjs: ~7.8.1 => 7.8.1 
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.5.3 => 2.7.0 (2.6.3)
    typescript: ^5.2.0 => 5.5.4 
    yarn: ^1.22.0 => 1.22.22 
    zone.js: ~0.14.0 => 0.14.10 
  npmGlobalPackages:
    @angular/cli: 17.3.3
    @aws-amplify/cli: 11.0.2
    bootstrap: 3.3.7
    bower: 1.8.0
    browser-sync: 2.17.5
    corepack: 0.22.0
    firebase-tools: 3.0.8
    generator-angular: 0.15.1
    generator-bootstrap: 0.2.2
    generator-gulp-angular: 1.1.1
    generator-karma: 2.0.0
    generator-node-webkit: 2.0.0-alpha.3
    generator-nwjs: 0.0.3
    generator-oldmen: 0.1.13
    generator-react-gulp-browserify-less: 1.0.1
    grunt-cli: 1.2.0
    gulp: 3.9.1
    http-server: 0.9.0
    istanbul: 0.4.5
    jasmine-node: 1.14.5
    jekyll-cli: 0.3.9
    karma-cli: 1.0.1
    mocha: 3.2.0
    n: 5.0.1
    nmp: 1.0.3
    nodewebkit: 0.11.6
    npm-check-updates: 16.10.12
    npm: 10.2.3
    protractor: 7.0.0
    typescript: 5.4.4
    yo: 1.8.5

Describe the bug

No items are returned by GraphQL call on many-to-many relation. Items exist in the correctly named DynamoDB join table. Specific error is "TypeError: checklistModel.actionModels.items is not iterable"

The definition of the ChecklistModel and ActionModel types are below. All models in the schema file are public (to eliminate any security related errors that may be causing this issue).

type ActionModel @model @auth(rules: [{ allow: public }]){
  id: ID!
  company: String!
  name: String
  notes: String 
  duration: Int
  checklists: [ChecklistModel] @manyToMany(relationName: "ChecklistActions")
}

type ChecklistModel @model @auth(rules: [{ allow: public }]){
  id: ID!
  company: String!
  name: String
  notes: String
  duration: Int
  preCharter: Boolean
  actionModels: [ActionModel] @manyToMany(relationName: "ChecklistActions")
  workflows: [WorkflowModel] @manyToMany(relationName: "WorkflowChecklists") 
}

Expected behavior

checklistModel.actionModels.items is an array with one item (and so therefore iterable)

Reproduction steps

1. Select 'Checklist Admin'
2. Select a Checklist item
3. Open the context-based menu, and select 'edit'

The error occurs when the EditChecklist component is opened.

Code Snippet

// Put your code below this line.

// Code used to create a Checklist Model with Action Models
// In the add-checklist component

  async onAddChecklistPressed(model: ChecklistModel, formDirective: FormGroupDirective) {
    try {
      this._checklistModelsService.createChecklistModel(model, this.checklist).then(() => {
        this._snackBar.open('Created a new checklist', 'OK', { duration: 3000 });
        this.checklistForm.reset();
        formDirective.resetForm();
        this.checklist = [];
        this._getActions();
      });
    } catch (error) {
      this._snackBar.open('Error creating the checklist', 'OK', { duration: 3000 });
    }
  }

// In the ChecklistModel service

  async createChecklistModel(checklistModel: ChecklistModel, actions: ActionModel[]) {
    const checklistMutationResult = await this.client.graphql({
      query: createChecklistModel,
      variables: {
        input: {
          company: 'seaforth',
          name: checklistModel.name,
          duration: checklistModel.duration,
          notes: checklistModel.notes,
          preCharter: checklistModel.preCharter,
        }
      }
    });

    const checklist = checklistMutationResult.data.createChecklistModel;

    for (const action of actions) {
      await this.client.graphql({
        query: createChecklistActions,
        variables: {
          input: {
            actionModelId: action.id,
            checklistModelId: checklist.id
          },
        }
      });
    }
    
    const updatedChecklist = await this.getChecklistModelFromId(checklist.id);
    console.log(updatedChecklist.actionModels);
  }

// Code to retrieve the ChecklistModel
// In the ChecklistModel service


  async getChecklistModelFromId(id: string): Promise<ChecklistModel> {
    const checklistResult = await this.client.graphql({
      query: getChecklistModel,
      variables: { id: id }
    })
    return checklistResult.data.getChecklistModel as ChecklistModel;
  }

Log output

The item from the join table is shown below. The actionModelId and checklistModelId match the ids from the corresponding ActionModel and ChecklistModel tables. The value returned from the getChecklistModelFromId is also attached.

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @desert-digital 👋 thanks for raising this issue and providing detailed reproduction steps!

I will attempt to reproduce and report back with any findings.

[desert-digital]

hey @chrisbonifacio: any insight on this? thanks!