How to create a MySQL connection using Ag-Grid and Next.js?

Question

While opening a database connection to a Planetscale MYSQL database using node.js, I encountered the following error :

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Query'
    |     property '_timer' -> object with constructor 'Timer'
    --- property '_object' closes the circle
    at JSON.stringify (<anonymous>)
    at sendData (C:\Users\.....\node_modules\next\dist\server\api-utils\node.js:201:47)
    at apiRes.send (C:\Users\.......\node_modules\next\dist\server\api-utils\node.js:444:31)
    at handler (webpack-internal:///(api)/./pages/api/freezer.ts:11:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
API resolved without sending a response for /api/freezer, this may result in stalled requests.

I was following a guide provided by the Ag-grid blog https://blog.ag-grid.com/using-ag-grid-with-react-and-next-js/ and instead of using a Postgres database, I would prefer a MySQL one since it is already set up.

I can verify the connection works as Planetscale registers a table read. However parsing the data seems to be an issue I don't fully grasp.

My current api is the following:

import connection from "../../utils/db";
import { NextApiRequest, NextApiResponse } from "next";
 
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const retrieve = 'SELECT * FROM Freezer';
    const freezer = await connection.query(retrieve);
    res.send(freezer);
  } catch (error) {
    console.log(error);
  }
}

my DB connection is as follows:

import mysql from 'mysql';

const connection = mysql.createConnection(process.env.DATABASE_URL as string)

console.log('Connected to PlanetScale!')

export default connection;

My fetch call on the page is :

  useEffect(() => {
    fetch('../api/freezer')
    .then((response) => response.json())
      .then((data) => setRowData(data.rows));
  }, []);

I was hoping that the change was as simple as modifying the connection string and database type. I think that there is an issue with the response not being the type that it is expecting, but I can't be certain. I also don't think there are any errors with asynchronous calls.

Any other best practice suggestions are much appreciated.

How to create a MySQL connection using Ag-Grid and Next.js?

0 Answers0