Bond Trading + TS : what is the type?

Hi All,
I have worked on “daml-ui-template” where the templates were stuffed in Main.
Currently, I am working on “ex-bond-trading” sample from daml repo and facing type issues while querying templates(Bond, Cash, Dvp etc).
Below are the code and error I’m stuck at trying out types to assign.

UPDATED
Also to mention, I have seperated daml and UI projects. I start daml and then run codegen to generate daml.js at UI project (which creates @daml.js/ex-bond-trading-3.0.0) and then start UI.

import **BondImp** from "@daml.js/ex-bond-trading-3.0.0/lib/Bond";
**import { useQuery } from "@daml/react";**

function Bond{ 
    ...
    const bonds = useQuery(**BondImp**);
    console.log(bonds.contracts);
}

Error:
Argument of type ‘typeof import("/home/…/ex-bond-trading-UI-react/node_modules/@daml.js/ex-bond-trading-3.0.0/lib/Bond/index")’ is not assignable to parameter of type ‘Template<object, unknown, string>’.
Type ‘typeof import("/home/…/ex-bond-trading-UI-react/node_modules/@daml.js/ex-bond-trading-3.0.0/lib/Bond/index")’ is missing the following properties from type ‘Template<object, unknown, string>’: templateId, sdkVersion, keyDecoder, keyEncode, and 3 more. TS2345

Seeking for help in this forum since it’s a sample taken from DAML repo.
Any help is appreciated.

It’s hard to be sure without access to more of your code, but I’d first point out that you’re defining a function with the same name as an import, and that’s bound to confuse both the TS type-checker and readers of your code, as they live in the same namespace. I would strongly recommend not doing that.

//It’s hard to be sure without access to more of your code
Snippet in the question is all the code.
I am trying to query all the active Bond contracts with daml/react.
When “ex-bond-trading” is executed as per the doc provided, the Bank has 10Bond and 10Cash active contracts.

I am trying to query the Bond and Cash using above snippet.

// I would strongly recommend not doing that
I have made changes in the question

Does changing the name of the import change the error message you get?

import bond from "@daml.js/ex-bond-trading-3.0.0/lib/Bond";
import BondImp from "@daml.js/ex-bond-trading-3.0.0/lib/Bond";
import { Cash } from "@daml.js/ex-bond-trading-3.0.0/lib/Cash";
import { useQuery } from "@daml/react";
function Market() {
  const bonds = useQuery(BondImp);
}

Error
Argument of type ‘typeof import("/home/…/ex-bond-trading-UI-react/node_modules/@daml.js/ex-bond-trading-3.0.0/lib/Bond/index")’ is not assignable to parameter of type ‘Template<object, unknown, string>’.
Type ‘typeof import("/home/…/ex-bond-trading-UI-react/node_modules/@daml.js/ex-bond-trading-3.0.0/lib/Bond/index")’ is missing the following properties from type ‘Template<object, unknown, string>’: templateId, sdkVersion, keyDecoder, keyEncode, and 3 more.ts(2345)

import { Bond } from "@daml.js/ex-bond-trading-3.0.0/lib/Bond";
import { Cash } from "@daml.js/ex-bond-trading-3.0.0/lib/Cash";
import { useQuery } from "@daml/react";
function Market() {
  const bonds = useQuery(Bond);
}

Error
Argument of type ‘Template<Bond, undefined, “a47bd7215c9a7a019f4cf03b9c95e501407c0c21515032846ceb37c5f8f086fa:Bond:Bond”> & { Split: Choice<Bond, Split, Tuple2<ContractId, ContractId<…>>, undefined>; Merge: Choice<…>; Archive: Choice<…>; Transfer: Choice<…>; }’ is not assignable to parameter of type ‘Template<object, unknown, string>’.
Type ‘Template<Bond, undefined, “a47bd7215c9a7a019f4cf03b9c95e501407c0c21515032846ceb37c5f8f086fa:Bond:Bond”> & { Split: Choice<Bond, Split, Tuple2<ContractId, ContractId<…>>, undefined>; Merge: Choice<…>; Archive: Choice<…>; Transfer: Choice<…>; }’ is missing the following properties from type ‘Template<object, unknown, string>’: sdkVersion, keyEncode, encodets(2345)
(alias) namespace Bond
(alias) const Bond: damlTypes.Template<Bond, undefined, “a47bd7215c9a7a019f4cf03b9c95e501407c0c21515032846ceb37c5f8f086fa:Bond:Bond”> & {
Split: damlTypes.Choice<Bond, Split, pkg40f452260bef3f29dede136108fc08a88d5a5250310281067087da6f0baddff7.DA.Types.Tuple2<…>, undefined>;
Merge: damlTypes.Choice<…>;
Archive: damlTypes.Choice<…>;
Transfer: damlTypes.Choice<…>;
}
import Bond

This looks like you might be running into an issue in an older version of the typscript libraries (ex-bond-trading is still on version 1.5.0). I recommend upgrading the SDK and the correspondng typescript libraries to 1.16.0.

bingo… That was it.
I have a follow up question.
The application shows 10 count beside Bond template, as you can check in the image shared above, but when I query Bond template it responds with zero size contract array.

No error

const bonds = useQuery(Bond);   *or useStreamQueries(Bond);*
console.log(bonds);

o/p:
{“contracts”:[],“loading”:true}

Are you logged in as the same party? Is there any chance you might have mixed up the package IDs?

That latter can occur if you have recompiled the DAR file without restarting the sandbox. Then the sandbox would have two versions of Bond, one with 10 active contracts and one with 0, and the UI code would be querying the second one.

1 Like

The data hasn’t finished loading yet, that’s why you get loading: true. Once it has finished loading, the number of contracts should match up (assuming you didn’t mix up parties or package ids).

1 Like

Checked for the correction you both have mentioned @Gary_Verhaegen @cocreature .

I am modifying “daml-ui-template” and yes i have logged in as same party.

Is their a provision to query with party as parameter? if not how does the query know just with template what party is accessing it?

I created all fresh again.

Still the resulting contract array is empty.

const { contracts, loading } = useQuery(Bond);  //with this we get all contracts associated with Bond template right?
if (!loading) {
    alert(JSON.stringify(contracts));
 }

The alert does not hit.

In the navigator based screen under “template” tab I see Template Bond:Bond@a47bd7215c9a7a019f4cf03b9c95e501407c0c21515032846ceb37c5f8f086fa for every parties and same shows up hovering on import statement in IDE.

How are you using this? useQuery is internally based on useEffect so it’s intended to be used as a hook in a react component.

useQuery should only work within the context of a React component somehow nested within a DamlLedger component, and that sets the party id (as a magic “ambient” value).