const [fullname, setFullname] = useState('') const [id, setId] = useState('') function AddMember() { try { sql_query( "INSERT INTO members (id, Fullname) VALUES (?, ?)", [ id, fullname ] ); } catch (error) { throw Error(error.message) } } setId(e.target.value)} id="id" type="number" placeholder="ID Card Number"> setFullname(e.target.value)} id="fullname" name='fullname' type="text" placeholder="Fullname"> Add Member This is the relevant code I believe. My issue is that this inserts nulls into my database. I'm very new to nextjs so any and all help would be appreciated.

Need help using variables inside mysql query to insert data in to database

Answered

Giant panda posted this in #help-forum

Giant pandaOP

2023-08-13T08:41:17.000Z

const [fullname, setFullname] = useState('')
    const [id, setId] = useState('')
    function AddMember() {
        try {
            sql_query(
                "INSERT INTO members (id, Fullname) VALUES (?, ?)", [ id, fullname ]
            );
        } catch (error) {
            throw Error(error.message)
        }
    }

<input onChange={e => setId(e.target.value)} id="id" type="number" placeholder="ID Card Number"></input>

<input onChange={e => setFullname(e.target.value)} id="fullname" name='fullname' type="text" placeholder="Fullname"></input>

<button onClick={AddMember()} type="submit">Add Member</button>

This is the relevant code I believe. My issue is that this inserts nulls into my database. I'm very new to nextjs so any and all help would be appreciated.

Answered by fuma

1. Why are you doing the database query at the client side?
2. The value onClick is wrong, it should be () => addMember() instead of addMember()
3. Inputs are not controlled, you need to pass the value prop

View full answer

39 Replies

fuma

2023-08-13T09:52:00.000Z

Answer

@fuma 1. Why are you doing the database query at the client side? 2. The value `onClick` is wrong, it should be `() => addMember()` instead of `addMember()` 3. Inputs are not controlled, you need to pass the `value` prop

Giant pandaOP

2023-08-13T10:03:26.000Z

I'm clueless to be completely honest. I picked up nextjs just a month ago to work on a college project. And just learning still. So I don't know the correct way to do a lot of things.

1) I'm unsure how to run query on server side or when to.
2) I don't understand how you want me to add that part to my code..
3) I don't understand

Giant pandaOP

2023-08-13T10:26:44.000Z

sharing the db.js file where connection is made.

import mysql from 'serverless-mysql'

export const db = mysql({
    config: {
        host: process.env.MYSQL_HOST,
        database: process.env.MYSQL_DATABASE,
        user: process.env.MYSQL_USERNAME,
        password: process.env.MYSQL_PASSWORD,
        // multipleStatements: true
    }
})

export async function sql_query(query_string, values = []) {
    try {
        const results = await db.query(query_string, values)
        await db.end()
        return results
    } catch (error) {
    }
}

fuma

2023-08-13T10:44:10.000Z

These are some common nouns in React.js, as a web dev, I would recommend you learning React.js first before touching frameworks like Next.js. When working in Next.js projects, youâ€™ll likely think in the perspective of both client side and server side. In your case:
- Can you connect database from client side?
- No, if the users can do any database queries, everyone can hack into your database
- Instead, create an route handler (API endpoint), and invoke it from client

Only do database queries in the server side

Giant pandaOP

2023-08-13T10:54:49.000Z

I was recommended to use nextjs for my project by my friend. I am doing my best to integrate the backend by myself. I have done just a bit of php and js with html before. Other than that, I don't have a lot of experience.

So what I've done is completely client side manipulation of database? Any document I can read to learn how to create a route handler? I have made a lot of progress using nextjs on my project. Though I'm sure it's not optimal. Backend is very complicated as of now.

Philippine Crocodile

2023-08-13T10:56:15.000Z

Check https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Make a fetch request to that route that you make

Giant pandaOP

2023-08-13T11:01:43.000Z

ðŸ˜… Honestly feel lost reading the docs file..

fuma

2023-08-13T11:02:39.000Z

Yep, thanks for heydoon.

Actually most of the questions can be answered by the docs.
anyway back to the topic, your onClick prop in the submit button is wrong, you should pass a lambda instead of invoking addMember directly

Philippine Crocodile

2023-08-13T11:05:58.000Z

Check this project I made to test out app router.
https://github.com/haydencarlson/todos-next-13

You can see how I made my API routes
https://github.com/haydencarlson/todos-next-13/tree/main/app/api

fuma

2023-08-13T11:15:30.000Z

In my opinion, I think youâ€™re missing some important concept. I can see many common mistakes in your code, and as I suggested, learning Next.js seems to be too fast for you.

I donâ€™t know what have you learned so far, and Iâ€™m neither a good teacher. Try taking it step by step, getting started with some simple React.js apps and learn the concepts. The logic of re-render, lifecycles, components, hooks, and some built-in utilities. Next.js is built on the top of React.js, without deeper understanding of it you will quickly feel depressed by the difficulty of learning Next.js

Giant pandaOP

2023-08-13T12:17:19.000Z

I see. Understandable. Is react js simpler to get started with? Do I have to restart my project from scratch? Or can I reuse the frontend code that I wrote? I have just by the end of the year to finish my project and I'm just trying to learn using the internet as best as I can.

fuma

2023-08-13T13:25:30.000Z

Donâ€™t reuse, create some other projects, like a simple todo app. I mean itâ€™s a chance to get deeper into React.js. Itâ€™s August now and you have a whole month to train yourself before starting to work on the project.

React is a JavaScript library with powerful ecosystem, Next.js is a large framework. I believe you can take it easily within two months

So hereâ€™s my simple roadmap:
React + Vite (A tool to run react apps) -> Next.js basics
Learn the concept of React Server Components, and start exploring different features of Next.js.

And of course feel free to ask here

@fuma And of course feel free to ask here <a:meow_party:763131349698609173>

Giant pandaOP

2023-08-15T11:03:27.000Z

Would it be not ideal if I started working on my project and learn as I go along?

fuma

2023-08-15T13:30:46.000Z

Itâ€™s fine, above are my suggestions but it still depends on you since my learning method doesnâ€™t suit everyone

AlÎ¹_ AryÎ±É´

2023-08-15T13:31:25.000Z

Wow, 20 messages a minute

Well, my bad

@fuma Itâ€™s fine, above are my suggestions but it still depends on you since my learning method doesnâ€™t suit everyone

Giant pandaOP

2023-08-15T15:26:48.000Z

Alright. I'll talk with my supervisor about how well the backend integration should be done and get back to you. Because it's a degree level project.

Giant pandaOP

2023-08-28T15:51:00.000Z

Okay. So, can anyone explain simply why when i use the variables inside the sql query, it doesn't store anything in the database?

fuma

2023-08-28T16:00:13.000Z

"variables" doesn't exist in SQL, it's a parameterized query, the question mark is a placeholder.
So of course, it won't store anything into your database except what you have done with the query (Like insert statement)

Giant pandaOP

2023-08-29T07:19:37.000Z

So what would I need to do to store data from textbox into database table?

fuma

2023-08-29T07:23:30.000Z

Donâ€™t know you are referring to, you can use an INSERT statement to insert a new row into the table

Read the tutorials/docs of your database if you wanna know the usage

@Giant panda ` const [fullname, setFullname] = useState('') const [id, setId] = useState('') function AddMember() { try { sql_query( "INSERT INTO members (id, Fullname) VALUES (?, ?)", [ id, fullname ] ); } catch (error) { throw Error(error.message) } }` `<input onChange={e => setId(e.target.value)} id="id" type="number" placeholder="ID Card Number"></input> <input onChange={e => setFullname(e.target.value)} id="fullname" name='fullname' type="text" placeholder="Fullname"></input> ` `<button onClick={AddMember()} type="submit">Add Member</button> ` This is the relevant code I believe. My issue is that this inserts nulls into my database. I'm very new to nextjs so any and all help would be appreciated.

Giant pandaOP

2023-08-29T07:28:55.000Z

I have a submit button, that when clicked runs the query. I want the query to take the values from the input boxes id and fullname.

fuma

2023-08-29T07:35:08.000Z

Then how do you handle the submit event? Are you using server actions, library like react-hook-form, or just controlled inputs with useState?

Giant pandaOP

2023-08-29T07:38:50.000Z

Just controlled inputs. Its just a simple add to table form.

fuma

2023-08-29T07:43:57.000Z

Normally you will make database queries on the server side, so create a POST route handler, and receive inputs from the request body.

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

After that, you can make a POST request from client side

Giant pandaOP

2023-08-29T07:56:59.000Z

And if i were to make queries on the client side?

fuma

2023-08-29T08:01:23.000Z

Impossible unless you want everyone to hack into your database

Giant pandaOP

2023-08-29T08:05:34.000Z

Isee. I am using phpmyadmin as server and with dummy data. And its not a program I would be publishing to the market.

fuma

2023-08-29T08:18:39.000Z

No, never do that since it can be a dangerous security risk

Giant pandaOP

2023-10-12T20:14:58.000Z

@fuma Hi. It's been almost a month and a half since I asked this question. Just wanted to give an update. I thought I'd take a look at this thread to see if I understand it now.

I have been working on my project in next js still. And now I understand everything you were talking about.

I ended up using php with next js. I learned to use axios and make get, post and put requests.

Two weeks ago I finished all functionalities for the web app. This week I got the mobile app functional and running. It's far from perfect and finished.

Anyways, just wanted to let you know since this was the first thread I created after starting to learn next js.

fuma

2023-10-12T23:21:33.000Z

Sounds nice!