Server Actions and this Keyword

[jintaokoong]

Summary

I am trying out Next 15, RSC for the first time. However, I ran into an issue when I am trying to run a sqlite db query within my server action. Is there any better solutions than writing an API for it? I am using the sqlite3 package for the db integration.

'use server';

import { db } from "./database";

export const createItem = async (title: string): Promise<number> => {
    if (!title) {
        throw new Error("Title is required");
    }

    return new Promise((resolve, reject) => {
        db.serialize(() => {
            db.run(
                `
                    INSERT INTO items (title) VALUES ($title)
                `,
                {
                    $title: title
                },
                function(err) {
                    if (err) {
                        reject(err);
                    }

                    resolve(this.lastID);
                }
            )
        })
    })
}

Attempt to do that will cause the following error message:

Import trace for requested module:
./src/app/api/checklist.ts
./src/ui/create-item-input.tsx
 ⨯ ./src/app/api/checklist.ts
Error:   × Server Actions cannot use `this`.
  │
    ╭─[D:\Developments\checklist-app\src\app\api\checklist.ts:24:1]
 21 │                         reject(err);
 22 │                     }
 23 │
 24 │                     resolve(this.lastID);
    ·                             ────
 25 │                 }
 26 │             )
 26 │         })
    ╰────

Import trace for requested module:
./src/app/api/checklist.ts
./src/ui/create-item-input.tsx

I am not sure why it is this keyword relevant in this context, since Next should be treating the function as a server side thing.

Additional information

No response

Example

No response

[icyJoseph]

Alright, so this is by design, #73059 - Are you trying to use it as a global to store data? I am trying to figure out exactly why is it forbidden, but looks like you'd need to change your approach anyway.

[jintaokoong]

I'm trying to use the sqlite3 package, where the provided API require the client to use this to access the run result. Ideally, I would like to just access the run result and get the lastID without doing another round trip to the database.

[maciej-ka]

@jintaokoong I tried to replicate but it somehow works without mentioned error. Testing on npm run dev.
https://github.com/maciej-ka/next.js-server-action-this

[maciej-ka]

15.1.2

[icyJoseph]

I can't reproduce either, perhaps dynamicIO or other feature flags are needed?

[maciej-ka]

@jintaokoong is your repository public, so that we could try to reproduce?

[icyJoseph]

Yeah well, the code to forbid this is merged, so, it'll most likely be the default some day.

[jintaokoong]

@maciej-ka Wow. That's weird indeed, I cloned and tried running your version, it ran without any issues. Mine would spit out the error mentioned when I try to access the page. I've included the link to my public repository if you hadn't seen it.

[jintaokoong]

Hi guys, sorry for the delayed response. Here is the public repository where I got the error to reproduce.

https://github.com/jintaokoong/next-app-this

Thanks for all the responses, really appreciate the help.

[maciej-ka]

oki, I confirm, in this repo error is greeting users

[icyJoseph]

Again, I know there is an error being shown, but it is by design as per #73059, we should probably, @samcx into this, see if the core team has any input onto why this is forbidden, from a technical point of view.

[jintaokoong]

Yeah, I'm curious to know as well. I would think that the operation should be encapsulated on the server side and no spill overs from client side should occur.

[icyJoseph]

Most likely some aspect of serialization. But yeah, let's see if there's some more input. Otherwise good that you could move forward with your project.

[maciej-ka]

SQL insert has an optional RETURNING * part.
It will return data of just created row(s).
And its supported also in sqlite.

Here is createItem rewriten to use it:

export const createItem = async (title: string) => {
  return new Promise<number>((resolve, reject) => {
    db.serialize(() => {
      db.all(
        `
            INSERT INTO items (title) VALUES ($title) RETURNING id;
        `,
        {
          $title: title
        },
        function (err, rows: {id: number}[]) {
          if (err) {
            reject(err);
          }
          resolve(rows[0].id);
        }
      )
    })
  });
};

[jintaokoong]

Perfect, I think this will work for this case. Thank you for the support!

[maciej-ka]

Thanks also, I learned a ton doing this.

[maciej-ka]

Somehow, I feel the topic is still open.

What are you, this?

Going back to the example, I debugged a little

const createItem = async (title: string): Promise<number> => {
    console.log('--- 1. createItem ---');
    console.dir(this);
    // ...

    return new Promise((resolve, reject) => {
        console.log('--- 2. Promise body ---');
        console.dir(this);

        db.serialize(() => {
          console.log("--- 3. db.serialize callback ---");
          console.dir(this);

            db.run(
                // ...
                function(err) {
                    // ...
                    console.log("--- 4. db.run callback ---");
                    console.dir(this);
                    resolve(this.lastID);
                }
             // ...

Which results in

--- 1. createItem ---
{}
--- 2. Promise body ---
{}
--- 3. db.serialize callback ---
{}
--- 4. db.run callback ---
Statement { lastID: 3, changes: 1 }

Valid / invalid cases

I'm guessing the intention of #73059 was to forbid first three cases.
However, using Statement object should be allowed.

Would it be difficult to detect valid vs invalid this in the parser,
where the current restrictions are applied?

Transform into getter?

An alternative solution might be to transform this during compilation into some sort of getter statement.
This getter could, at runtime, verify that value of this is legal. Or raise an error otherwise.

@unstubbable
@icyJoseph
@samcx

[unstubbable]

I agree that this (no pun intended) should be allowed. Would you mind creating an issue for it?

[maciej-ka]

Sure, I'll set it up and share a link.

[unstubbable]

#74179

[maciej-ka]

#74181