Attempting to develop a server component that will transmit a JSON result set from a MySQL database located on the local server. What is the best method to send the server object (RowDataPacket) to the

Question

Attempting to develop a server component that will transmit a JSON result set from a MySQL database located on the local server. What is the best method to send the server object (RowDataPacket) to the

After successfully rendering server-side pages and creating forms with react hooks for database updates, I encountered a challenge in integrating Ag-Grid into my application. Despite being able to retrieve data from the database using the mysql2 module and having it rendered in json format, I faced issues when attempting to pass this data to the client side (ag-grid) resulting in 'type' violations. My experience with Typescript has been challenging, but I am determined to overcome these obstacles.

I discovered that mysql provides two packet objects - a RowDataPacket containing the result set data in preformatted json, and a FieldPacket containing the column DDL of the result set. To streamline the process, I plan to create an api endpoint to serve the json data to the client side where I will utilize react hooks such as useState and useEffect to populate the ag-grid on the client-side. While this approach seems straightforward, I have encountered difficulties without the use of tools like Express, Axios, Prisma, or Vercel.

One potential solution could involve restructuring the received json data into a more usable format before serving it through the api. However, this method may require excessive effort and manipulation, potentially overloading the server. Despite exploring various discussions on the topic, finding a definitive answer has proved elusive thus far.

Any assistance or guidance on this matter would be greatly appreciated.

The Big Picture

javascript mysql json typescript next.js

Answer 1

Answer №1

Wow! It was surprisingly easy to figure out the issue. It had nothing to do with JSON data conversion from mySQL or Typescript, but everything to do with NextJS automatic routing. I've been focused on front-end development for so long that I overlooked the fact that automatic HTTP routes require a 'router.ts/js[x]' page instead of a 'page.ts/js[x]' page.

NextJS 14 is truly amazing!

Project structure plays a vital role: check out the server routes here

and view the FULL route.tsx code below:

import { pool } from "@/config/db.config";
import { NextResponse } from "next/server";

export async function GET() {
  let query: string = "SELECT * FROM product";

  try {
    const connection = await pool.getConnection();
    const [ rows, fields ] = await connection.query(query);

    connection.release();

    return NextResponse.json(rows);

  } catch (error) {
    console.error("Failed query: ", error);
    throw error;
  }
}

One important thing to note: ensure that the route handler is a valid HTTP Request type - in this case GET().

That's all for now.

Answer 2

Wow! It was surprisingly easy to figure out the issue. It had nothing to do with JSON data conversion from mySQL or Typescript, but everything to do with NextJS automatic routing. I've been focused on front-end development for so long that I overlooked the fact that automatic HTTP routes require a 'router.ts/js[x]' page instead of a 'page.ts/js[x]' page.

NextJS 14 is truly amazing!

Project structure plays a vital role: check out the server routes here

and view the FULL route.tsx code below:

import { pool } from "@/config/db.config";
import { NextResponse } from "next/server";

export async function GET() {
  let query: string = "SELECT * FROM product";

  try {
    const connection = await pool.getConnection();
    const [ rows, fields ] = await connection.query(query);

    connection.release();

    return NextResponse.json(rows);

  } catch (error) {
    console.error("Failed query: ", error);
    throw error;
  }
}

One important thing to note: ensure that the route handler is a valid HTTP Request type - in this case GET().

That's all for now.

Attempting to develop a server component that will transmit a JSON result set from a MySQL database located on the local server. What is the best method to send the server object (RowDataPacket) to the

Answer №1

Similar questions

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Troubleshooting the onExited callback issue with Popover component in Material UI

One way to dynamically track if any radio buttons in a group have been selected is by utilizing JQuery

Exploring the capabilities of Angular 4 with the integration of the Web

Importing local JSON files into Vuex state

Setting the root position of a div: How can it be done?

I'm curious if there is a comparable method to achieve the functionality of MySQL's JSONOBJECTAGG() in MariaDB?

Exploring the integration of methods in Vue.js components

Rails: Ensure that JSON form fields remain populated in case the form encounters a validation error

Error: The property you are trying to set is undefined and cannot

switch out javaScript for selenium

How can React TypeScript bind an array to routes effectively?

What could be causing my component library styles to appear duplicated in Next.js?

"Concealing a column in a PrimeNG data table with dynamic columns: A step-by-step

Matching a regular expression pattern at the beginning of a line for grouping strings

Top recommendations for Backand on JSON manipulation and associated entities

Encountering the React Native error message "TypeError: Object(...) is not a function" while using react navigation stack

EasyWaySaveArchive in ninja training - mastering the art of retrieving components

Updating the value of a rails parameter with JavaScript

The error message "Property 'DecalGeometry' is not found in the type 'typeof "..node_modules/@types/three/index"'."