Canister and Agent Type Mismatch

Developers JavaScript
1

I am building a backend canister using Typescript using Azle. I am getting the following error when I call a specific backend function in the frontend: TypeError: Cannot convert a BigInt value to a number.

This is an example of the backend function:

const Data = Record({
    id: int8,
    description: text,
})

let data = StableBTreeMap(int8, Data, 0);

getAllData: query([], Vec(Data), () => {
        const DataList = data.values();
        return DataList;
    }),

I am able to call the function using the Candid UI perfectly fine. Therefore, I confirmed that the backend is working as intended.

Upon calling the function in the frontend, I receive the error TypeError: Cannot convert a BigInt value to a number.

After the following troubleshooting, I believe that this error may be related to the agent-js type mismatch:

  1. I called another function from the frontend that only returns text (based on Azle types) or string (based on the agent-js type). I was able to call the function and return the text/string as intended.

  2. I am assuming that this is related to the Azle / agent-js type mismatch because in Azle, the function returns int8 which infers the Candid UI type int8. However, based on the src/declarations/backend/backend.did.d.ts, the Actor Method is typing id as number. Typescript does distinguish a difference between number and BigInt.

Is a type mismatch between Azle and agent-js causing the error?

'getData : ActorMethod<
    [number],
    [] | [
      {
        'id' : number,
        'description' : string,
      }
    ]