Error while integrating DAML with exiting React appliction

Questions
, , ,
1

Hi,

We have an existing application running on React/NodeJS. We are trying to integrate DAML with it. During the integration getting the below error. Did anybody face this issue earlier?
Error detail as below :

Capture
Capture1083×543 74.9 KB

@ManishGrover

2

Hi @palanisamyc, could you share some of the surrounding code?

As the error message suggests, you can only call a hook (with useStreamQuery being one such hook) in the body of a function component. It’s not entirely clear where you are calling it from based on the screenshot but it looks like it might be from the top-level of the file outside of a function component. I recommend reading the introduction to react hooks to get an idea for how you can use hooks inside of a function component.

The other possibility is that the code you’ve shown us is in the body of a class component. You cannot use hooks there directly but there are various options to combine them. A quick search brought up this blogpost which shows two easy options.

1 Like
3

Hi @cocreature , Please find below the code snippet that i am trying,

import React, { } from "react";
import { Link } from "react-router-dom";
import "./dashboard.scss";
import Logout from '../login/Logout';
import $ from "jquery";
import ttConfig from '../../config.js';
import LoadingOverlay from 'react-loading-overlay';
import uuid from "uuid";
import { useStreamQuery, useLedger } from "@daml/react";
import { OutletRole, CreateOrder } from "@daml.js/supplychain-0.0.1/lib/Main";

class Dashboard extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			cartData: [],
		};
		this._handleSubmit = this._handleSubmit.bind(this);

		const OutletRoleData = useStreamQuery(OutletRole).contracts;
		
		fetch(ttConfig.url.getallproducts, {
			method: 'GET',
			headers: {
				'Content-Type': 'application/json'
			},
		})
			.then((response) => response.json()).then((getallproducts) => {

				const firstSKU = getallproducts[0].ProductSKU;
				this.setState({ firstSKU });
				const productInformation = getallproducts;
				this.setState({ productInformation, isLoading: false, });

				let murl = ttConfig.url.getmanufacturersforsku + '?productSKU=' + firstSKU
				fetch(murl, {
					method: 'GET',
					headers: {
						'Content-Type': 'application/json'
					},
				})
					.then((response) => response.json()).then((getmanufacturersforskudata) => {
						let manufacturerInformation = getmanufacturersforskudata;
						this.setState({ manufacturerInformation, isLoading: false, });
					})

			})
	}
1 Like
4

In that case, I recommend reading the blogpost I linked above. You cannot call a hook directly from the body of a class but there are various solutions to combine them.

2 Likes
5

Yes, the blogpost helped to sort out the issue. Thanks for the help.

Regards,
Palani

1 Like