AWS Amplify / Dynamo - array of objects coming back as array of strings

Question

I'm using react-select as a 'multi-select' in a react-app to set multiple music genres. This results in an array of objects as the value for that input. I'm using AWS Amplify / DynamoDB.

I'm not sure if this is an issue with my schema.graphql (below), how I'm handling / mishandling the data, or just my general coding deficits, but the data gets sent like this:

[{label='Afrobeat', value='Afrobeat'}, {label='Bikutsi', value='Bikutsi'}, {label='Benga', value='Benga'}]

And returns like this (single quotes stripped), double quotes added around each node):

["{label=Afrobeat, value=Afrobeat}", "{label=Bikutsi, value=Bikutsi}", "{label=Benga, value=Benga}"]

react-select can't process the data like that but I can't imagine I would have to do some tricky client-side handling to make it work. Any help would be graciously appreciated.

My schema.graphql for this Song type is:

type Song @model {
  album: Album @connection(name: "AlbumSongs")
  composer: String
  description: String
  duration: String
  genre: [String!]! // is this the correct value for an array?
  id: ID!
  instruments: String
  tags: [String!]!
  title: String!
}

Answer 1

Need to have another type GenreOptions to make it return as an array of objects instead of array of strings.

Something like:

type GenreOptions {
  label: String!
  value: String! // also another option is to have an enum type
}

type Song @model {
  genre: [GenreOptions!]!
}

Then the query would look like:

Song {
  genre {
    label
    value
  }
}