# Sample React code for displaying all the templates and Contracts for a DAML Model

**URL:** <https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322>\
**Category:** App Development\
**Tags:** react\
**Created:** [May 4, 2020, 1:39pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322 "2020-05-04T13:39:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bartcant](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bartcant/32/823_2.png) [@bartcant](https://forum.canton.network/u/bartcant)\
**Post date:** [May 4, 2020, 1:39pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/1 "2020-05-04T13:39:45Z")

</div>

Is there sample React code available to display all the Templates and Contracts (like in the Navigator version)

Thanks

---

<div class="post-metadata">

**Author:** ![rohanjr](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/rohanjr/32/259_2.png) [@rohanjr](https://forum.canton.network/u/rohanjr)\
**Post date:** [May 4, 2020, 2:58pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/2 "2020-05-04T14:58:53Z")

</div>

Hey @bartcant. You might want to check out @georg’s work here: [GitHub - digital-asset/daml-ui-template](https://github.com/digital-asset/daml-ui-template/)

Otherwise you can see React code for querying all contracts (for a particular template) in the Getting Started Guide: [https://docs.daml.com/getting-started/app-architecture.html#the-ui](https://docs.daml.com/getting-started/app-architecture.html#the-ui)

Let us know if either of those links help you out.

---

<div class="post-metadata">

**Author:** ![bartcant](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bartcant/32/823_2.png) [@bartcant](https://forum.canton.network/u/bartcant)\
**Post date:** [May 4, 2020, 7:23pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/3 "2020-05-04T19:23:38Z")

</div>

Thanks for your reply

Yes I have been using the daml-ui-template code sample

Correct me if I am wrong, but my understanding is that Default.js brings up all the templates for the Contract

> import React from “react”;
> 
> import Contracts from “…/…/components/Contracts/Contracts”;  
> import { useQuery } from “@daml/react”;  
> import { Network } from “@daml2js/Covid19-0.0.1”;  
> export default function Default() {  
> const assets = useQuery(Network);  
> return ();  
> }

Although I have several templates in my Daml, the list appears empty

I am using SDK 1.0.1

Here is my package.json

> {  
> “name”: “Covid19-js”,  
> “version”: “0.0.1”,  
> “private”: true,  
> “dependencies”: {  
> “@daml/ledger”: “^1.0.1”,  
> “@daml/react”: “1.0.0”,  
> “@daml/types”: “1.0.0”,  
> “@daml2js/Covid19-0.0.1”: “file:…/daml2js/Covid19-0.0.1”,  
> “@material-ui/core”: “^4.3.0”,  
> “@material-ui/icons”: “^4.2.1”,  
> “@material-ui/styles”: “^4.3.0”,  
> “@typescript-eslint/parser”: “^2.6.0”,  
> “classnames”: “^2.2.6”,  
> “eslint”: “^6.6.0”,  
> “eslint-config-prettier”: “^6.10.0”,  
> “eslint-config-react-app”: “^5.2.0”,  
> “eslint-plugin-prettier”: “^3.1.2”,  
> “jsonwebtoken”: “^8.5.1”,  
> “react”: “^16.12.0”,  
> “react-dom”: “^16.12.0”,  
> “react-json-view”: “^1.19.1”,  
> “react-router-dom”: “^5.0.1”,  
> “react-scripts”: “3.4.0”,  
> “tinycolor2”: “^1.4.1”,  
> “uuid”: “^3.3.3”  
> },
> 
> “resolutions”: {  
> “ **/** /set-value”: “^2.0.1”,  
> “ **/** /mixin-deep”: “^1.3.2”  
> },
> 
> “scripts”: {  
> “start”: “react-scripts start”,  
> “build”: “react-scripts build”,  
> “test”: “react-scripts test”,  
> “eject”: “react-scripts eject”,  
> “lint”: “eslint --ext .js,.jsx,.ts,.tsx --max-warnings 0 src/”  
> },  
> “eslintConfig”: {  
> “extends”: “react-app”  
> },
> 
> “browserslist”: {  
> “production”: [  
> “\>0.2%”,  
> “not dead”,  
> “not op\_mini all”  
> ],  
> “development”: [  
> “last 1 chrome version”,  
> “last 1 firefox version”,  
> “last 1 safari version”  
> ]  
> },  
> “proxy”: “[http://localhost:7575/](http://localhost:7575/)”  
> }

---

<div class="post-metadata">

**Author:** ![bartcant](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bartcant/32/823_2.png) [@bartcant](https://forum.canton.network/u/bartcant)\
**Post date:** [May 4, 2020, 10:32pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/4 "2020-05-04T22:32:03Z")

</div>

Additional steps I have taken:

I deleted nodes-module  
and re-built via yarn install

Here is some more outputs from Console that may give some indication:

Upon Browser refresh on the Default tab

```haskell
-> all Templates are listed in the Dev console but nothing is displayed on the page

```

Upon Browser refresh on the Reports Tab

```haskell
-> All templates are listed in the Dev Console but additional error messgae Ledger.StreamQuery unknown message - {error: "Cannot resolve any templateId from request: Search…25d8c76635d8dc57575740dd771a5e839),Main,Network))"}

log.js:24 [HMR] Waiting for update signal from WDS...
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRegistration.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Quarantine.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:ImmunityProof.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Covid19Test.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestAppointment.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestRequest.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRole.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenInvitation.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicRole.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicInvitation.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Registration:CitizenRegistration.
hooks.js:161 mount useStreamQuery(afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network, ...) undefined
index.js:1 Ledger.streamQuery unknown message {error: "Cannot resolve any templateId from request: Search…25d8c76635d8dc57575740dd771a5e839),Main,Network))"}
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
(anonymous) @ index.js:492
index.js:1 Ledger.streamQuery unknown message {heartbeat: "ping"}
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6

```

---

<div class="post-metadata">

**Author:** ![georg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/georg/32/368_2.png) [@georg](https://forum.canton.network/u/georg)\
**Post date:** [May 4, 2020, 11:25pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/5 "2020-05-04T23:25:08Z")

</div>

The error `Cannot resolve any templateId from request` does indicate a mismatch between the DAML model loaded on the ledger and the one used to generate the JS code. Could be some lingering JS dependency cached somewhere.

Make sure you:

- Stop the ledger
- Delete `node_modules` in your ui directory
- Delete the `daml2js` directory
- Build your DAML using `daml build`
- Rerun the JS codegen
- Rebuild your UI code
- Start the ledger
- Start the UI

Also, there seems to be a typo in your `package.json`:

`“@daml2js/Covid19-0.0.1”: “file:…/daml2js/Covid19-0.0.1”,`

^ there should be only 2 dots in front of `/daml2js/`

Can you fix this, try the above, and report back? Sorry this is giving you such a headache, it takes a bit getting it running smoothly during continuous DAML development in my experience.

---

<div class="post-metadata">

**Author:** ![georg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/georg/32/368_2.png) [@georg](https://forum.canton.network/u/georg)\
**Post date:** [May 4, 2020, 11:31pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/6 "2020-05-04T23:31:45Z")

</div>

One more thing: once you have this working, if you change your DAML models, always recompile the DAML model (the codegen doesn’t do this automatically), then rerun the codegen and then you need to force a reinstall of your package with:

`yarn install --force --frozen-lockfile`

before restarting your UI host. This is not optimal and I’m looking for a way to simplify this cycle. I can share the Makefile I typically use tomorrow.

---

<div class="post-metadata">

**Author:** ![georg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/georg/32/368_2.png) [@georg](https://forum.canton.network/u/georg)\
**Post date:** [May 5, 2020, 6:28am UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/7 "2020-05-05T06:28:07Z")

</div>

Here’s my Make target for a full rebuild:

```haskell
build:
	rm -rf .daml
	rm -rf daml2js
	rm -rf ui/build
	daml build
	daml codegen js -o daml2js .daml/dist/*.dar
	cd ui && yarn install --force --frozen-lockfile
	cd ui && yarn build

```

Note that you shouldn’t _have_ to delete these directories before building, but I tend to stay on the safe side and since none of the tools involved support incremental builds anyway it doesn’t matter much.

---

<div class="post-metadata">

**Author:** ![bartcant](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bartcant/32/823_2.png) [@bartcant](https://forum.canton.network/u/bartcant)\
**Post date:** [May 5, 2020, 12:28pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/8 "2020-05-05T12:28:17Z")

</div>

Thanks. Will give it a try today

---

<div class="post-metadata">

**Author:** ![bartcant](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bartcant/32/823_2.png) [@bartcant](https://forum.canton.network/u/bartcant)\
**Post date:** [May 5, 2020, 6:49pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/9 "2020-05-05T18:49:35Z")

</div>

This cleared all the previous error.  
However still no templates in the list.

I noticed though the Default.js code is linking to the Contracts.JS which appears to retrieve the Contracts from the Ledger. So could it be that it indeed needs to be an empty list when starting from scratch ?

If that is the case, how can I pull the Templates (like in SandBox-Navigator)

Alternatively, maybe I could seed some contract with daml.script  
(I still need to go through the documentation and this may trigger more questions)

Here is some additional output from additional console.logs which I temporarily embedded in Default.js  
import React from “react”;

> import Contracts from “…/…/components/Contracts/Contracts”;  
> import { useQuery } from “@daml/react”;  
> import { Main } from “@daml2js/Covid19-0.0.1”;  
> export default function Default() {

> const assets = useQuery(Main.Network);  
> console.log(Main.Network);  
> const assetoutput = JSON.stringify(assets);  
> console.log(“assets”+ assetoutput);
> 
> return ();
> 
> }

Developer Console Log Output after refreshing the page

> Navigated to [http://localhost:3000/](http://localhost:3000/)  
> DevTools failed to load SourceMap: Could not load content for chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR\_UNKNOWN\_URL\_SCHEME  
> log.js:24 [HMR] Waiting for update signal from WDS…  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRegistration.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Quarantine.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:ImmunityProof.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Covid19Test.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestAppointment.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestRequest.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRole.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenInvitation.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicRole.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicInvitation.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network.  
> index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Registration:CitizenRegistration.  
> Default.js:9 {templateId: “afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network”, InviteHealthClinic: {…}, InviteCitizen: {…}, keyDecoder: ƒ, decoder: ƒ, …}  
> Default.js:11 assets{“contracts”:,“loading”:false}  
> Default.js:9 {templateId: “afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network”, InviteHealthClinic: {…}, InviteCitizen: {…}, keyDecoder: ƒ, decoder: ƒ, …}  
> Default.js:11 assets{“contracts”:,“loading”:true}  
> hooks.js:19 Uncaught (in promise) {kind: “DecoderError”, input: undefined, at: “input”, message: “expected an array, got undefined”}  
> rejected @ hooks.js:19  
> Promise.then (async)  
> step @ hooks.js:20  
> (anonymous) @ hooks.js:21  
> push…/node\_modules/@daml/react/hooks.js.\_\_awaiter @ hooks.js:17  
> load @ hooks.js:97  
> (anonymous) @ hooks.js:110  
> commitHookEffectListMount @ react-dom.development.js:19731  
> commitPassiveHookEffects @ react-dom.development.js:19769  
> callCallback @ react-dom.development.js:188  
> invokeGuardedCallbackDev @ react-dom.development.js:237  
> invokeGuardedCallback @ react-dom.development.js:292  
> flushPassiveEffectsImpl @ react-dom.development.js:22853  
> unstable\_runWithPriority @ scheduler.development.js:653  
> runWithPriority$1 @ react-dom.development.js:11039  
> flushPassiveEffects @ react-dom.development.js:22820  
> (anonymous) @ react-dom.development.js:22699  
> workLoop @ scheduler.development.js:597  
> flushWork @ scheduler.development.js:552  
> performWorkUntilDeadline @ scheduler.development.js:164

---

<div class="post-metadata">

**Author:** ![georg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/georg/32/368_2.png) [@georg](https://forum.canton.network/u/georg)\
**Post date:** [May 5, 2020, 6:55pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/10 "2020-05-05T18:55:33Z")

</div>

If you start with an empty ledger without any initialization script, you won’t see any contracts. The `Contracts` component doesn’t show templates, just contracts for a particular template.

You can use a DAML Script to create some contracts on the ledger at startup. Add the script to your `daml.yaml` with `init-script` so it runs when you `daml start`. Take a look at the `daml-ui-template` repo to see how that’s done ([daml.yaml](https://github.com/digital-asset/daml-ui-template/blob/c10930ef94f7f5df64fdc87a5def34f3594b08eb/daml.yaml) and [startup script](https://github.com/digital-asset/daml-ui-template/blob/c10930ef94f7f5df64fdc87a5def34f3594b08eb/daml/Main.daml#L28)).

---

<div class="post-metadata">

**Author:** ![bartcant](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bartcant/32/823_2.png) [@bartcant](https://forum.canton.network/u/bartcant)\
**Post date:** [May 7, 2020, 3:01pm UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/11 "2020-05-07T15:01:05Z")

</div>

@georg@rohanjr

Got it to work after loading in a contract using the JSON-API

Thanks for shepherding me through this process.

---

<div class="post-metadata">

**Author:** ![georg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/georg/32/368_2.png) [@georg](https://forum.canton.network/u/georg)\
**Post date:** [May 8, 2020, 5:53am UTC](https://forum.canton.network/t/sample-react-code-for-displaying-all-the-templates-and-contracts-for-a-daml-model/322/12 "2020-05-08T05:53:19Z")

</div>

That’s great to hear! Make sure to establish a repeatable development process when you continuously change the DAML models and the UI. The Makefile I posted in the other threads is what I use so I don’t have to remember all the steps each time.