# Best way to use generated declarations in JS / reactJS frontend?

**URL:** <https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749>\
**Category:** Developers\
**Created:** [February 28, 2023, 8:43pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749 "2023-02-28T20:43:12Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![p\_d](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@p\_d](https://forum.dfinity.org/u/p_d)\
**Post date:** [February 28, 2023, 8:43pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/1 "2023-02-28T20:43:12Z")

</div>

My candid declaration has the following service:

```auto
service : {
  update_user_secret : (Secret) -> ();
}

```

which leads to the the generated files in `declarations`, e.g. `backend.did.js`:

```auto
const Secret = IDL.Record({
    'id' : IDL.Text,
    'username' : IDL.Opt(IDL.Text),
    'password' : IDL.Opt(IDL.Text),
  });

```

What is the best way to import the generated Secret object into my reactJS frontend code to create a Secret object which can be passed as parameter into the canister call?

---

<div class="post-metadata">

**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\
**Post date:** [February 28, 2023, 9:08pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/2 "2023-02-28T21:08:50Z")

</div>

In apps, the common way is to use `dfx generate` which takes care of generating types.

I think you need something like dfx v12+ to run the command.

If you create a sample app, the command `dfx generate` should be pre-backed in the sample `package.json` as a `generate` script if I am not wrong.

Does that help?

---

<div class="post-metadata">

**Author:** ![p\_d](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@p\_d](https://forum.dfinity.org/u/p_d)\
**Post date:** [March 1, 2023, 6:11am UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/3 "2023-03-01T06:11:35Z")

</div>

Generating the types is not an issue, but rather how to include them in the proper way into my frontend JS / reactJS app.  
There are 4 generated files in the declarations folder, which one should be imported and how?

In the examples I found (like whoami, helloworld, etc.) there were no object parameters to be sent to the canisters, the canister query and update functions don‘t use any input parameters….

Thanks!

---

<div class="post-metadata">

**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\
**Post date:** [March 1, 2023, 6:21am UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/4 "2023-03-01T06:21:47Z")

</div>

Don’t know if @anon74414410 has a blog post or example to share that answer this question?

---

<div class="post-metadata">

**Author:** ![cymqqqq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/cymqqqq/32/14515_2.png) [@cymqqqq](https://forum.dfinity.org/u/cymqqqq)\
**Post date:** [March 1, 2023, 7:52am UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/5 "2023-03-01T07:52:48Z")

</div>

do you mean this?  
It can generate did.js related to which did file you want  
didc-macos bind src/ic\_game/ic\_game.did -t js \> ic\_game.did.js

---

<div class="post-metadata">

**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\
**Post date:** [March 1, 2023, 7:56am UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/6 "2023-03-01T07:56:37Z")

</div>

> [@cymqqqq](#):
>
> do you mean this?

OP meant - I think - how to import the declarations in the React/TS/JS code

e.g.

```auto
import type { _SERVICE as SatelliteActor } from '$declarations/satellite/satellite.did';
import { idlFactory as idlFactorSatellite } from '$declarations/satellite/satellite.factory.did';

```

I’m doing some mumbo jumbo around it and don’t use React, that’s why I pinged Kyle to ask if there is a nice sample or article about it.

---

<div class="post-metadata">

**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\
**Post date:** [March 1, 2023, 8:10am UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/7 "2023-03-01T08:10:22Z")

</div>

Side notes @p_d :

- in following thread I shared an example of what I do to import types: [With typescript how can I directly use the types created by "dfx generate"? - #2 by peterparker](https://forum.dfinity.org/t/with-typescript-how-can-i-directly-use-the-types-created-by-dfx-generate/17896/2)

- I used this approach in [https://github.com/buildwithjuno/juno](https://github.com/buildwithjuno/juno) if you want a concrete example but, again, not sure it’s the best practice and it isn’t developer with Webpack/React

---

<div class="post-metadata">

**Author:** ![p\_d](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@p\_d](https://forum.dfinity.org/u/p_d)\
**Post date:** [March 1, 2023, 12:58pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/8 "2023-03-01T12:58:13Z")

</div>

Hi @peterparker  
Thanks a lot for your hints and links! It’s exactly what I meant. I’ll try it out in the next days when I’m back at work again…  
Cheers 🙂

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [March 4, 2023, 2:07am UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/9 "2023-03-04T02:07:43Z")

</div>

I recommend using the `createActor` or default export from the `index`. Otherwise, you can construct the actor from the IDL yourself. The important thing (in my mind) is attaching the \_SERVICE type, so you can get intellisense from your arguments, return types, and all that.

You can either do `createActor<_SERVICE>(...)` or you can also optionally do `createdActor & _SERVICE` if you have already created it somewhere.

The service types are autogenerated, so all you need to get a more complex interface is to have a more complicated backend to interact with!

As a slightly dated React example, check out my IC Avatar codebase: [GitHub - krpeacock/ic-avatar: Latest iteration of the IC Avatar tutorial application](https://github.com/krpeacock/ic-avatar)

---

<div class="post-metadata">

**Author:** ![p\_d](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@p\_d](https://forum.dfinity.org/u/p_d)\
**Post date:** [March 6, 2023, 9:08pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/10 "2023-03-06T21:08:58Z")

</div>

Hmmm, I had a look at the examples but I’m still struggling to find a way for my problem… Following my artefacts:

`declarations/backend.did.d.ts:`

```auto
import type { Principal } from '@dfinity/principal';
import type { ActorMethod } from '@dfinity/agent';

export interface Secret {
  'id' : bigint,
  'url' : [] | [string],
  'username' : [] | [string],
  'date_created' : bigint,
  'password' : [] | [string],
  'name' : string,
  'notes' : [] | [string],
  'category' : SecretCategory,
  'date_modified' : bigint,
}
export interface _SERVICE {
  'add_user_secret' : ActorMethod<[Secret], Result>,
}

```

`declarations/backend.did.js:`

```auto
export const idlFactory = ({ IDL }) => {
  const Secret = IDL.Record({
    'id' : IDL.Nat,
    'url' : IDL.Opt(IDL.Text),
    'username' : IDL.Opt(IDL.Text),
    'date_created' : IDL.Nat64,
    'password' : IDL.Opt(IDL.Text),
    'name' : IDL.Text,
    'notes' : IDL.Opt(IDL.Text),
    'category' : SecretCategory,
    'date_modified' : IDL.Nat64,
  });
  return IDL.Service({
    'add_user_secret' : IDL.Func([Secret], [Result], []),
  });
};
export const init = ({ IDL }) => { return []; };

```

`declarations/index.d.ts` and `index.js` are untouched and remain as generated.

In our ReactJS typescript code we try to call function `add_user_secret()`in the following way:

```auto
import { HttpAgent } from "@dfinity/agent";
import { AuthClient } from "@dfinity/auth-client";
import { backend, createActor } from "../../../declarations/backend";

export async function add_secret () {
    let xx = ???
    let authClient = await AuthClient.create();
    let identity = authClient.getIdentity();
    let actor = iccrypt_backend;
    const agent = new HttpAgent({ identity });
    actor = createActor(process.env.ICCRYPT_BACKEND_CANISTER_ID, {
        agent,
    });
   await actor.add_user_secret(xx);
}

```

…where xx obviously should be of type `Secret` as defined in the declarations.

Any idea how to create the secret parameter to call the IC backend function is appreciated!  
Thank you

---

<div class="post-metadata">

**Author:** ![p\_d](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@p\_d](https://forum.dfinity.org/u/p_d)\
**Post date:** [March 7, 2023, 7:31pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/11 "2023-03-07T19:31:48Z")

</div>

Figured out that in fact it’s quite easy when importing the types and interfaces directly:

```auto
import { Secret, SecretCategory } from '../../../declarations/backend/backend.did';
const category: SecretCategory = { 'Password': null };
let secret: Secret = {
    id: BigInt(1),
    name: "myFirstSecret",
    url: ["https://foobar.com"],
    category: category,
    username: ["username"],
    password: ["password"],
    date_created: BigInt(1),
    date_modified: BigInt(2),
    notes: []
};
...
await actor.add_user_secret(secret);

```

The problem was with attribute `category` which is an enum in rust and needs to be importer as well… Now it works like a charm!

---

<div class="post-metadata">

**Author:** ![nolma](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@nolma](https://forum.dfinity.org/u/nolma)\
**Post date:** [January 5, 2024, 6:57pm UTC](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/12 "2024-01-05T18:57:11Z")

</div>

I tried the import line used in the latest post here,

> [@Accessing types from declarations file in JS frontend](https://forum.dfinity.org/t/accessing-types-from-declarations-file-in-js-frontend/26237):
>
> I’m trying to import my generated types on the frontend. import { bulldogblast } from "../../declarations/bulldogblast" This is working, I can call functions on my canister using await bulldogblast.\<function\> One of those function calls requires a type. const result = await bulldogblast.input(parseInt(gameID), 1, {commandType: "Thrust", vector: directionVector, player: 1} fails because "Thrust" doesn’t match the invariant of "Fire; Thrust"; I tried sending a symbol, failed, integer (hopin…

that didn’t work for me.