Unable to Fetch Response - 201 Message

Question

I am trying to retrieve a response from an API using fetch in NextJS, I can get the message by calling the API but am unable to get anything using fetch. All I get from fetch is response 201 message that it's created.

When I run the API in postman I get the response:

{
    "id": "21a1f0a6-f6c4-4aaf-9f48-2c9dba276646",
    "status": "SUBMITTED"
}

But when I call the API using fetch in NestJS I get the response:

Response { type: "cors", url: "http://localhost:9000/api/v1/fireblocks/createTxnVaultToVault", redirected: false, status: 201, ok: true, statusText: "Created", headers: Headers, body: ReadableStream, bodyUsed: false }

Expected Behavior The expected behavior is to get the same response as the API postman response. I need the tracking id to be passed into the UI

Backend - API Service & Controller Code in NestJS

Below is the API to run a transaction, it's coming from a NodeJS like framework (NestJS):

    async createTxnVaultToVault(txn: Txn) {
        this.logger.log("Creating transaction for account: " + txn);

        this.logger.log("Transaction data: " + JSON.stringify(txn));

        const payload: TransactionArguments = {
            assetId: txn.asset,
            source: {
                type: PeerType.VAULT_ACCOUNT,
                id: String(txn.source)
            },
            destination: {
                type: PeerType.VAULT_ACCOUNT,
                id: String(txn.dest)
            },
            amount: String(txn.amount),
            fee: String(txn.fee),
            note: txn.note
        };

        this.logger.log("TXN Payload data: " + JSON.stringify(payload));

        return fireblocks().createTransaction(payload)
            .then(res => res)
            .then(res =>  {
                console.log(res)
                return res;
            })
            .catch(err => {
                console.log(err);
                return err;
            });
    }

Below is the controller to run a transactions, it's coming from a NodeJS like framework (NestJS):

  @ApiTags('Fireblocks Transactions - Create Vault to Vault Transaction')
  @Post('/createTxnVaultToVault')
  async createTxnVaultToVault(
      @Body() txn: Txn
  ): Promise<any> {
    return this.appService.createTxnVaultToVault(txn)
        .catch(e => {
            this.logger.log(e);
            return getError(e);
        });
  }

Frontend - Fetch Code in NextJS

export async function transferFunds(txn) {
    const req_url = process.env.NEXT_PUBLIC_FIREBLOCKS_SERVER + "/createTxnVaultToVault";

    console.log(txn);

    return fetch(req_url, {
        method: 'POST',
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify(txn)
    })
        .then(resp => {
            console.log(resp);
        })
        .then(resp => {
            console.log(resp);
            return resp;
        })
        .catch(err => {
            console.log(err);
        });
}

`.then(resp => resp.json()).then(data => {console.log(data); return data;)})` — sideshowbarker, Aug 13 '22 at 23:15

score -1 · Answer 1 · answered Aug 14 '22 at 08:10

It worked by changing how the UI received data. Below is how the API should be called:

Frontend - Fetch Code in NextJS

export async function transferFunds(txn) {
    const req_url = process.env.NEXT_PUBLIC_FIREBLOCKS_SERVER + "/createTxnVaultToVault";

    console.log(txn);

    return fetch(req_url, {
        method: 'POST',
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify(txn)

    })
      .then(  async resp => {
          //console.log(await resp.json())
          return await resp.json();
      })
      .then(data => {
            console.log(data);
            return data;
            //return data;
      });
}

Unable to Fetch Response - 201 Message

1 Answers1