Recently, I encountered an issue and found a solution by making a small change in my code. Instead of simply assigning the response to a variable using this.ssoContent = response;, I opted to assign only the data within the response object like this:

this.ssoContent = response.data;

Instead of keeping the entire circular response object in storage, it's sufficient to store just the data object key from the response. This approach should function effectively.

Forgetting to include the keyword await in your async function can lead to this issue as well.

#2024

Summary:

const result = await fetch(url, options);
return result.json();    

Detailed explanation:

Have you ever worked with the fetch API in JavaScript? When you send a request using fetch, make sure to extract and return only the data object from the response to avoid circular dependency issues.

Encountered an issue while using TypeORM in conjunction with NestJS where I kept running into the same error:

TypeError: Converting circular structure to JSON
--> starting at object with constructor 'EntityMetadata'
|     property 'ownColumns' -> object with constructor 'Array'
|     index 0 -> object with constructor 'ColumnMetadata'
--- property 'entityMetadata' closes the circle

I later realized that the reason for this error was due to missing getOne() or getMany() method calls at the end of my query builder.

The Issue of Incorrect Implementation:

All the objects I'm attempting to return are intricate with circular references.

@Post()
async someRequestName() {
  return this.httpService.post( // responseType is Observable<AxiosResponse>
    'http://localhost:3001/api/some-endpoint',
  );
}

@Post()
async someRequestName() {
  return firstValueFrom( // responseType becomes Promise<Observable<AxiosResponse>>
    this.httpService.post(
      'http://localhost:3001/api/some-endpoint',
    ),
  );
}

@Post()
async someRequestName() {
  const data = await firstValueFrom(
    this.httpService.post(
      'http://localhost:3001/api/some-endpoint',
    ),
  );
  return data; // responseType still remains as Promise<Observable<AxiosResponse>>
}

Recommendation for Correct Usage:

data.data contains only the returned value from the request, without any circular references.

@Post()
async someRequestName() {
  const data = await firstValueFrom(
    this.httpService.post(
      'http://localhost:3001/api/some-endpoint',
    ),
  );
  return data.data; // response is in JSON format
}

Key Takeaway:

It is crucial for methods using decorators like @Post(), @Get(), etc., to return simple JSON objects instead of complex ones with methods and circular references. Transmission of methods and circular references over HTTP protocol is not supported.

Encountered an issue when my Nest.js app attempted to send requests to other Nest.js apps. The problem stemmed from the server's response, which proved difficult to troubleshoot. Fortunately, I found a solution by utilizing the superagent library. https://www.npmjs.com/package/superagent Resolving the problem was a straightforward process.

To avoid issues, refrain from stringifying the axios response object.

incorrect

const payload = { name: "M Hmzara Rajput" }
console.log("request:", JSON.stringify(payload));
const response = await axios.post(`http://server:port/endpoint`, payload);
// Instead of stringifying the entire response object, target response.data
console.log("response:", JSON.stringify(response));

correct

const payload = { name: "M Hmzara Rajput" }
console.log("request:", JSON.stringify(payload));
const response = await axios.post(`http://server:port/endpoint`, payload);
console.log("response:", JSON.stringify(response.data));

Recently, I encountered a challenge that required significant time investment to resolve. Fortunately, my efforts paid off in the end.

Changing the line from "this.ssoContent = response;" to "this.ssoContent = response.data;" solved the issue for me.

Although it may not directly address the current issue at hand, if you happen to stumble upon this thread while encountering a similar problem in React, it could be due to using ? on an unknown type:

type Example = unknown
const example:Example
{example ? <div>example</div> : null}

This would result in an error being thrown, but you can resolve it by changing it to:

{Boolean(example) ? <div>example</div> : null}

If you encounter circular JSON in your code, consider using a third-party solution like circular-json. Check it out here: https://www.npmjs.com/package/circular-json

To add this tool to your project, run either of these commands: npm i circular-json OR npm i circular-json --force

Implementation example:

const CircularJSON = require('circular-json');
const obj = CircularJSON.stringify(object)

In this scenario, 'object' can be either a circular or normal JSON object.

My code is throwing an error because I made the mistake of wrapping an object inside another object. The bolded line is causing the issue in my scenario.

 for (const record of records) {
     const { createdAt } = record;
     const dateOnly = createdAt.toISOString().split('T')[0]
     if (!organizedData[`${dateOnly}`]) {
         organizedData[`${dateOnly}`] = [];
         }
     const joinedData = { ...record }; //<<< This section is giving me trouble>>>
     organizedData[`${dateOnly}`].push(joinedData);
}