# Using the Backend Declaration in the Frontend

**URL:** <https://forum.dfinity.org/t/using-the-backend-declaration-in-the-frontend/23971>\
**Category:** JavaScript\
**Created:** [October 24, 2023, 6:20am UTC](https://forum.dfinity.org/t/using-the-backend-declaration-in-the-frontend/23971 "2023-10-24T06:20:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![princess\_eth](https://avatars.discourse-cdn.com/v4/letter/p/ce7236/32.png) [@princess\_eth](https://forum.dfinity.org/u/princess_eth)\
**Post date:** [October 24, 2023, 6:20am UTC](https://forum.dfinity.org/t/using-the-backend-declaration-in-the-frontend/23971/1 "2023-10-24T06:20:38Z")

</div>

I am continuing to have issues calling a backend method in a frontend canister (based on React). After referencing the tutorials particularly the custom\_greeting (Hello World) tutorial and [Best way to use generated declarations in JS / reactJS frontend? - #10 by p\_d](https://forum.dfinity.org/t/best-way-to-use-generated-declarations-in-js-reactjs-frontend/18749/10), I am able to infer the following.

I can import the declarations file created for my backend into the frontend component:

`import { backend } from "../declarations/backend";`

Let’s pretend that my declaration file for my backend is the following:

```auto
service: () -> {
    getAllId: () -> (vec record {id:text}) query;
}

```

I am trying to then add this code to the my frontend component:

```auto
 useEffect(() => {
    async function fetchIds() {
      try {
        const ids = await backend.getAllId();
        return ids;
      } catch (error) {
        console.error("Error fetching ids:", error);
      }
    }
    fetchIds();
  }, []);

```

I receive the following error:

`Error fetching ids: TypeError: Cannot convert a BigInt value to a number`

What could I be doing wrong?

---

<div class="post-metadata">

**Author:** ![princess\_eth](https://avatars.discourse-cdn.com/v4/letter/p/ce7236/32.png) [@princess\_eth](https://forum.dfinity.org/u/princess_eth)\
**Post date:** [October 24, 2023, 8:01pm UTC](https://forum.dfinity.org/t/using-the-backend-declaration-in-the-frontend/23971/2 "2023-10-24T20:01:57Z")

</div>

I found the error that is causing this. The agent is unaware of which backend canister to call. This is related to this question posted [here](https://forum.dfinity.org/t/canister-id-undefined-error/23568).

Since a React application created from `create-react-app` requires `REACT_APP_` appended on an environment variable, whenever I run dfx, the agent automatically updates to call the canister Id environment variable without the `REACT_APP`\_ appended.

For example, whenever I run `dfx deploy`, the following file tied to the JS agent is automatically generated `.dfx/local/canisters/backend/index.js` and calls the following environment variable:

`export const canisterId = process.env.BACKEND_CANISTER_ID;`

One way to resolve this is to include the `dot-env` package in the file which requires an update to the dfx package.

Has anyone found a better solution?

---

<div class="post-metadata">

**Author:** ![infu](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/infu/32/11321_2.png) [@infu](https://forum.dfinity.org/u/infu)\
**Post date:** [October 24, 2023, 9:00pm UTC](https://forum.dfinity.org/t/using-the-backend-declaration-in-the-frontend/23971/3 "2023-10-24T21:00:25Z")

</div>

I’ve done something like this  
[https://github.com/infu/nftanvil/blob/main/oapps/nftanvil\_frontend/dfx.ic.env.js](https://github.com/infu/nftanvil/blob/main/oapps/nftanvil_frontend/dfx.ic.env.js)  
you can just generate the files  
`.env.development.local`  
and  
`.env.production.local`  
based on the files dfx generates.  
Most probably you don’t need a lot of the code in there