aws-amplify / aws-amplify/amplify-data

Can't send AWSJSON array values using aws-amplify and graphql

Open
#474 3 comments 0 reactions 1 assignee Claimed by @chrisbonifacio View on GitHub
feature-request GraphQL
Dominant language
TypeScript
Stars
18
Forks
23
Avg merge
26m
Merged PRs (30d)
1

Description

### Before opening, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-js/discussions).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md#bug-reports).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

### JavaScript Framework

Vue

### Amplify APIs

GraphQL API

### Amplify Version

v6

### Amplify Categories

api

### Backend

Amplify CLI

### Environment information

```
# Put output below this line

System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 63.16 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
npm: 10.3.0 - ~/.nvm/versions/node/v18.19.0/bin/npm
pnpm: 9.0.6 - ~/.nvm/versions/node/v18.19.0/bin/pnpm
Browsers:
Safari: 17.4.1
npmPackages:
@aws-sdk/client-dynamodb: ^3.556.0 => 3.556.0
@aws-sdk/lib-dynamodb: ^3.556.0 => 3.556.0
@mdi/font: ^7.4.47 => 7.4.47
@nuxt/eslint: ^0.3.9 => 0.3.9
@nuxtjs/i18n: ^8.3.0 => 8.3.1
@vee-validate/nuxt: ^4.12.6 => 4.12.6
@vee-validate/yup: ^4.12.6 => 4.12.6
aws-amplify: ^6.0.30 => 6.0.30
date-fns: ^3.6.0 => 3.6.0
nuxt: ^3.11.2 => 3.11.2
vite-plugin-vuetify: ^2.0.3 => 2.0.3
vue: ^3.4.21 => 3.4.25
vue-router: ^4.3.0 => 4.3.2
vuetify: ^3.5.16 => 3.5.17
yup: ^1.4.0 => 1.4.0
npmGlobalPackages:
corepack: 0.22.0
gpt-context-feeder: 0.0.1
npm: 10.3.0
pnpm: 9.0.6
tunnelmole: 2.2.14

```

### Describe the bug

I'm developing an application using Nuxt 3 and Amplify.

- I created a data model using Ampify Studio:
```graphql
enum EventType {
ECONOMY
BUSINESS
POLITICS
SPORTS
TECHNOLOGY
ENTERTAINMENT
OTHER
}

type Event @model @auth(rules: [{allow: public}]) {
id: ID!
type: EventType!
title: String!
description: String!
date: AWSDate!
relatedLinks: [AWSJSON]
involvedPeople: [AWSJSON]
involvedOrgs: [AWSJSON]
}
```
- I configured Amplify in my application:
.graphqlconfig.yml
```yml
projects:
campobomonline:
schemaPath: amplify/backend/api/campobomonline/build/schema.graphql
includes:
- lib/graphql/**/*.ts
excludes:
- ./amplify/**
- lib/API.ts
extensions:
amplify:
codeGenTarget: typescript
generatedFileName: lib/API.ts
docsFilePath: lib/graphql
region: us-west-1
apiId: null
maxDepth: 2
```
plugins/aws-amplify.ts
```ts
import { Amplify } from 'aws-amplify'
import awsExports from '~/lib/aws-exports'

Amplify.configure(awsExports)
```
- When sending empty JSONs, it works. But when I have any items I get `{ data: null, errors: [ { path: null, locations: [Array], message: "Variable 'involvedPeople' has an invalid value." } ] }`
dao.ts
```ts
import { generateClient } from 'aws-amplify/api'
import { createEvent, updateEvent, deleteEvent } from '~/lib/graphql/mutations'
import { getEvent, listEvents } from '~/lib/graphql/queries'
import type { EventPage } from '~/lib/events/model'
import { type Event, type CreateEventInput, type UpdateEventInput, type DeleteEventInput, EventType } from '~/lib/API'

class EventsDAO {
private client

constructor() {
this.client = generateClient()
}

...
async createEvent(createInput: CreateEventInput): Promise {
return await this.client.graphql({
query: createEvent,
variables: {
input: {
type: EventType.ECONOMY,
title: 'Lorem ipsum dolor sit amet',
description: 'Lorem ipsum dolor sit amet',
date: '1970-01-01Z',
// WORKS!
relatedLinks: [],
// DOESNT WORK!
involvedPeople: ['foo'],
involvedOrgs: [],
},
},
}).then(({ data }) => data.createEvent)
}
...

}
```

### Expected behavior

I should be able to send a JSON with items to the backend through the graphql API.

### Reproduction steps

1. Create a nuxt project https://nuxt.com/docs/getting-started/installation
2. Configure Amplify https://nuxt.com/deploy/aws-amplify
3. Create a schema having some JSON property using Amplify Studio and pull it from the cloud using amplify-cli. Follow Amplify instructions to configure it.
4. Try to send a JSON with items using the graphql library.

### Code Snippet

```javascript
// Put your code below this line.
import { generateClient } from 'aws-amplify/api'
import { createEvent, updateEvent, deleteEvent } from '~/lib/graphql/mutations'
import { getEvent, listEvents } from '~/lib/graphql/queries'
import type { EventPage } from '~/lib/events/model'
import type { EventType, Event, CreateEventInput, UpdateEventInput, DeleteEventInput } from '~/lib/API'

class EventsDAO {
private client

constructor() {
this.client = generateClient()
}

async createEvent(createInput: CreateEventInput): Promise {
return this.client.graphql({
query: createEvent,
variables: {
input: createInput,
},
}).then(({ data }) => data.createEvent)
}

async getEventById(id: string): Promise {
return this.client.graphql({
query: getEvent,
variables: {
id,
},
}).then(({ data }) => {
if (!data.getEvent) {
throw createError({ status: 404, message: 'Event not found' })
}
return data.getEvent
})
}

async updateEvent(updateInput: UpdateEventInput): Promise {
await this.getEventById(updateInput.id) // Check if event exists

// TODO: Implement optimistic locking

return this.client.graphql({
query: updateEvent,
variables: {
input: updateInput,
},
}).then(({ data }) => data.updateEvent)
}

async deleteEvent(deleteInput: DeleteEventInput): Promise {
await this.client.graphql({
query: deleteEvent,
variables: {
input: deleteInput,
},
}).then(({ data }) => {
if (!data.deleteEvent) {
throw createError({ status: 404, message: 'Event not found' })
}
})
}

async queryEventsByType(type: EventType, nextToken?: string | null): Promise {
const results = await this.client.graphql({
query: listEvents,
variables: {
filter: {
type: {
eq: type,
},
},
nextToken,
},
})

return {
items: results.data.listEvents.items,
nextToken: results.data.listEvents.nextToken,
}
}
}

export default EventsDAO
```

### Log output

```
// Put your logs below this line
ERROR { data: null,
errors:
[ { path: null,
locations: [Array],
message: "Variable 'involvedOrgs' has an invalid value." } ] }
```

### aws-exports.js

```
const awsmobile = {
"aws_project_region": "us-west-1",
"aws_appsync_graphqlEndpoint": "https://f6koholxxzc5pcqfwmtdjkdlsa.appsync-api.us-west-1.amazonaws.com/graphql",
"aws_appsync_region": "us-west-1",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "MY_SECRET_API_KEY"
};
```

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.