Creating/Reading a matrix is broken

[Aldo-Garza]

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

Next.js

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

No response

Backend

Amplify Gen 2

Environment information

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 977.84 MB / 15.79 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.98)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/adapter-nextjs: ^1.2.10 => 1.2.10
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @aws-amplify/backend: ^1.5.0 => 1.5.0
    @aws-amplify/backend-cli: ^1.2.9 => 1.2.9
    @aws-amplify/ui-react: ^6.1.13 => 6.1.14
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-sdk/s3-presigned-post: ^3.623.0 => 3.623.0
    @aws-sdk/s3-request-presigner: ^3.623.0 => 3.623.0
    @azure/storage-blob: ^12.24.0 => 12.24.0
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5
    @edge-runtime/cookies:  4.1.1
    @edge-runtime/ponyfill:  2.4.2
    @edge-runtime/primitives:  4.1.0
    @formatjs/intl-localematcher: ^0.5.4 => 0.5.4
    @fortawesome/fontawesome-svg-core: ^6.5.2 => 6.6.0
    @fortawesome/free-brands-svg-icons: ^6.5.2 => 6.6.0
    @fortawesome/free-regular-svg-icons: ^6.5.2 => 6.6.0
    @fortawesome/free-solid-svg-icons: ^6.5.2 => 6.6.0
    @fortawesome/react-fontawesome: ^0.2.0 => 0.2.2
    @hapi/accept:  undefined ()
    @hookform/resolvers: ^3.9.0 => 3.9.0
    @hookform/resolvers/ajv:  1.0.0
    @hookform/resolvers/arktype:  2.0.0
    @hookform/resolvers/class-validator:  1.0.0
    @hookform/resolvers/computed-types:  1.0.0
    @hookform/resolvers/effect-ts:  1.0.0
    @hookform/resolvers/fluentvalidation-ts:  1.0.0
    @hookform/resolvers/io-ts:  1.0.0
    @hookform/resolvers/joi:  1.0.0
    @hookform/resolvers/nope:  1.0.0
    @hookform/resolvers/superstruct:  1.0.0
    @hookform/resolvers/typanion:  1.0.0
    @hookform/resolvers/typebox:  1.0.0
    @hookform/resolvers/typeschema:  1.0.0
    @hookform/resolvers/valibot:  1.0.0
    @hookform/resolvers/vest:  1.0.0
    @hookform/resolvers/vine:  1.0.0
    @hookform/resolvers/yup:  1.0.0
    @hookform/resolvers/zod:  1.0.0
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @sendgrid/mail: ^8.1.3 => 8.1.3
    @types/lodash: ^4.17.7 => 4.17.7
    @types/luxon: ^3.4.2 => 3.4.2
    @types/negotiator: ^0.6.3 => 0.6.3
    @types/node: ^20 => 20.14.10
    @types/react: ^18 => 18.3.3
    @types/react-dom: ^18 => 18.3.0
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.2
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.20 => 10.4.20
    aws-amplify: ^6.6.5 => 6.6.5
    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 ()
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1
    commander:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    daisyui: ^4.12.10 => 4.12.10
    data-uri-to-buffer:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8 => 8.57.0
    eslint-config-next: ^14.2.5 => 14.2.5
    events:  undefined ()
    expo-server-sdk: ^3.10.0 => 3.10.0
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    firebase: ^10.12.5 => 10.12.5
    firebase-admin: ^12.3.0 => 12.3.0
    firebase/analytics:  undefined ()
    firebase/app:  undefined ()
    firebase/app-check:  undefined ()
    firebase/auth:  undefined ()
    firebase/auth/cordova:  undefined ()
    firebase/auth/web-extension:  undefined ()
    firebase/compat:  undefined ()
    firebase/compat/analytics:  undefined ()
    firebase/compat/app:  undefined ()
    firebase/compat/app-check:  undefined ()
    firebase/compat/auth:  undefined ()
    firebase/compat/database:  undefined ()
    firebase/compat/firestore:  undefined ()
    firebase/compat/functions:  undefined ()
    firebase/compat/installations:  undefined ()
    firebase/compat/messaging:  undefined ()
    firebase/compat/performance:  undefined ()
    firebase/compat/remote-config:  undefined ()
    firebase/compat/storage:  undefined ()
    firebase/database:  undefined ()
    firebase/firestore:  undefined ()
    firebase/firestore/lite:  undefined ()
    firebase/functions:  undefined ()
    firebase/installations:  undefined ()
    firebase/messaging:  undefined ()
    firebase/messaging/sw:  undefined ()
    firebase/performance:  undefined ()
    firebase/remote-config:  undefined ()
    firebase/storage:  undefined ()
    firebase/vertexai-preview:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    husky: ^9.0.11 => 9.1.4
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    lint-staged: ^15.2.2 => 15.2.7
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    luxon: ^3.5.0 => 3.5.0
    mailersend: ^2.2.0 => 2.2.0
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    negotiator: ^0.6.3 => 0.6.3
    neo-async:  undefined ()
    next: 14.2.5 => 14.2.5
    nextjs-toploader: ^1.6.12 => 1.6.12
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: ^8.4.41 => 8.4.41 (8.4.31)
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    prettier: ^3.2.5 => 3.3.3 (2.3.2, 2.8.8, 1.19.1)
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^18 => 18.3.1
    react-builtin:  undefined ()
    react-dom: ^18 => 18.3.1
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-is:  18.2.0
    react-refresh:  0.12.0
    react-select: ^5.8.0 => 5.8.0
    react-server-dom-turbopack-builtin:  undefined ()
    react-server-dom-turbopack-experimental-builtin:  undefined ()
    react-server-dom-webpack-builtin:  undefined ()
    react-server-dom-webpack-experimental-builtin:  undefined ()
    regenerator-runtime:  0.13.4
    sass-loader:  undefined ()
    scheduler-builtin:  undefined ()
    scheduler-experimental-builtin:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    server-only:  0.0.1
    setimmediate:  undefined ()
    shell-quote:  undefined ()
    source-map:  undefined ()
    source-map08:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    sweetalert2: ^11.12.4 => 11.12.4
    sweetalert2-react-content: ^5.0.7 => 5.0.7
    tailwindcss: ^3.4.7 => 3.4.7
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: <5.5.0 => 5.4.5 (4.4.4, 4.9.5)
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 12.11.1
    aws-amplify-gen2: 0.1.0
    corepack: 0.23.0
    eas-cli: 9.0.3
    npm: 10.2.4

Describe the bug

The model is described as

MatrixTest: a.model({ values: a.string().required().array().required().array().required() }).authorization((allow) =>[allow.publicApiKey()]),
Which represents a string matrix

The following server actions are used to insert and read a matrix

export const createMatrixTest = async (values: string[][]) => {
    const r = await cookiesClient.models.MatrixTest.create({ values })
    if (r.errors) {
        throw new Error(JSON.stringify(r.errors))
    }
    return r.data
}

export const getAllMatrixTest = async () => {
    return (await cookiesClient.models.MatrixTest.list()).data
}

The following snippet is used to read and create such entity

export default () => {

    useEffect(() => {
        const fetchMatrix = async () => {
            const matrix = await getAllMatrixTest()
            console.log(matrix)
        }
        fetchMatrix()
    }, [])

    const createMatrix = async () => {
        console.log('Creating matrix')
        await createMatrixTest([
            ['a', 'b', 'c'],
            ['d', 'e', 'f'],
        ])
    }

    return (
        <>
            <button className="btn sai-btn" type="button" onClick={createMatrix}>
                Create Matrix
            </button>
        </>
    )
}

However the returned data does not comply with the expected data type which is string[][], instead it returns string[] (the return
type of the sdk is in fact correct string[][], but the data is not ), causing errors when trying to use the data.

This is the value returned by the sdk

[
    {
        "id": "9124906e-4f3a-47cc-bbe7-85f6df0798fe",
        "values": [
            "[a, b, c]",
            "[d, e, f]"
        ],
        "createdAt": "2024-10-17T23:20:25.183Z",
        "updatedAt": "2024-10-17T23:20:25.183Z"
    }
]

Which must be, note the value part

[
    {
        "id": "9124906e-4f3a-47cc-bbe7-85f6df0798fe",
        "values": [
            ["a", "b", "c"],
            ["d", "e", "f"]
        ],
        "createdAt": "2024-10-17T23:20:25.183Z",
        "updatedAt": "2024-10-17T23:20:25.183Z"
    }
]

Expected behavior

Details given on the description

Reproduction steps

Details given on the description

Code Snippet

// Put your code below this line.

Log output

// 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 @Aldo-Garza 👋 thanks for raising this issue. I was able to reproduce consistently with the provided schema.

The string[][] values returned from the data client do seem to be parsed incorrectly as string[].

I've marked this as a bug for the team to investigate further.

[stocaaro]

Hello @Aldo-Garza,

Looking over your use-case, we do not currently support building a matrix of elements in the way that you are attempting to do. Could you structure the data as multiple records or store it in a json field or manager serializing/deserializing the data in your code to accomplish the requirements of your application?

Thank you for pointing out that our types expose the .array operator inside of an array field, this is an error and we will correct the types to resolve this bug.

Thanks,
Aaron

[stocaaro]

The schema definition syntax issue that mistakenly allowed for fields of arrays within arrays has been fixed with the latest version of the library. As a bug, this is resolved, so I will resolve this issue. If there is a feature request to extend behavior to cover cases like this, please open an issue with the details/use-cases.

Thanks,
Aaron