amplify-js: Many-to-Many returns null when using Amplify GraphQL client but not in Appsync Console's query tool.

Which Category is your question related to? GraphQL API, specifically using Amplify GraphQL client.

What AWS Services are you utilizing? Cognito, AWS AppSync, DynamoDB

Provide additional details e.g. code snippets

{
 "expo": "^35.0.0",
 "@aws-amplify/api": "^1.2.4",
 "@aws-amplify/auth": "^1.5.0",
 "@aws-amplify/core": "^1.2.4"
}

I’m getting different results with the same user credentials when I run a query in Appsync console and when I try the exact query it on my client side. The issue seems to be with the many-to-many connection. I’m not sure if this is a bug or I’m not correctly settings things up.

I’ve got a react native expo project and when run a custom getUser query in appsync console I get the correct results back no issues. The user has 4 jobs assigned to it, however when I run the following code in my app, I get and error but the error shows 4 null results for the job. The number of nulls seems to match the jobs assigned to the user.

type User
  @model
  @key(fields: ["tenantId", "userId"]) {
  tenantId: String!
  userId: ID!
  first_name: String!
  last_name: String!
  phone: AWSPhone
  jobs: [Assignment] @connection(name: "UserJobs", keyField: "userId")
}

type Job
  @model
  @key(fields: ["tenantId", "jobId"]) {
  tenantId: String!
  jobId: ID!
  identifier: String!
  note: String
  assignedTo: [Assignment] @connection(name: "JobUsers", keyField: "jobId")
}

# many-to-many connection
type Assignment @model(queries: null) @key(fields: ["tenantId", "id"]) {
  tenantId: String!
  id: ID!
  job: Job! @connection(name: "JobUsers", keyField: "jobId")
  user: User! @connection(name: "UserJobs", keyField: "userId")
}

A simple API call on screen load to test and see what I get back:

useEffect(() => {
    const loadData = async () => {
      try {
        const data = await API.graphql(
          graphqlOperation(getUser, {
            tenantId,
            userId
          })
        );
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    };
    loadData();
  }, []);

And the resulting console log (outputting the caught error):

{
  "data": {
    "getUser": {
      "tenantId": "a5e7333e-c22a-4926-9654-bf88fab55c36",
      "userId": "984f7aa4-9f30-4ae8-8322-5d7e52b9a570",
      "first_name": "John",
      "last_name": "Smith",
      "phone": "+12225556789",
      "jobs": {
        "items": [
          null,
          null,
          null,
          null,
        ],
        "nextToken": null,
      },
    },
  },
  "errors": [
    {
      "locations": null,
      "message": "Cannot return null for non-nullable type: 'Job' within parent 'Assignment' (/getUser/jobs/items[0]/job)",
      "path": [
        "getUser",
        "jobs",
        "items",
        0,
        "job",
      ],
    },
    {
      "locations": null,
      "message": "Cannot return null for non-nullable type: 'Job' within parent 'Assignment' (/getUser/jobs/items[1]/job)",
      "path": [
        "getUser",
        "jobs",
        "items",
        1,
        "job",
      ],
    },
    {
      "locations": null,
      "message": "Cannot return null for non-nullable type: 'Job' within parent 'Assignment' (/getUser/jobs/items[2]/job)",
      "path": [
        "getUser",
        "jobs",
        "items",
        2,
        "job",
      ],
    },
    {
      "locations": null,
      "message": "Cannot return null for non-nullable type: 'Job' within parent 'Assignment' (/getUser/jobs/items[3]/job)",
      "path": [
        "getUser",
        "jobs",
        "items",
        3,
        "job",
      ],
    },
  ],
}

Here’s what my query looks like:

export const getUser = `query GetUser($tenantId: String!, $userId: ID!) {
    getUser(tenantId: $tenantId, userId: $userId) {
      tenantId
      userId
      first_name
      last_name
      phone
      jobs {
        items {
          job {
            jobId
            identifier
            note
          }
        }
        nextToken
      }
    }
  }
`;