remult Next.js Tutorial

[remult]

remult Next.js Tutorial

[noam-honig]

@quangtynu, thanks for letting me know that it works.

Let me try and clarify.

When using a BackendMethod you can define an optional parameter of type Remult and the BackendMethod will automatically inject the correct remult object in the context of the incoming request.

Actually - before version 0.16, this was the only way to use remult on a backend method.

In version 0.16 we introduced the ability to just use the remult object directly without defining the optional parameter - we did it by using the async_hooks feature of node.

Since not all javascript environment support async_hooks (for example, demo) - we made it optional.

In your case - in the next tutorial - the instructions at this time do not include an explanation on how to enable that feature that depends on async_hooks.

So - while we fix the tutorial, I wanted to give you a quick workaround.

To summarize - for now (until we fix the tutorial), when you use backend methods, add an optional parameter of type Remult to gain access to the remult object.

Once we update the tutorial, I'll let you know.

Sounds good?

[quangtynu]

Thank you. @noam-honig . It works now.

[noam-honig]

Hi @quangtynu,

Great catch - I see the issue and am working on it.

In the meantime, let me suggest a workaround, please add an optional parameter called remult of type Remult to the setAll method. (, remult?:Remult)
And adjust the code that defined the repo by adding a '!' before the .repo. should be remult!.repo(Task)

You don't need to send that parameter when you call it - the BackendMethod decorator'll automatically inject it.

So your code should look like this:

import { BackendMethod, Remult } from "remult";
import { Task } from "./Task";

export class TasksController {
  @BackendMethod({ allowed: true })
  static async setAll(completed: boolean, remult?: Remult) {
    const taskRepo = remult!.repo(Task);
    for (const task of await taskRepo.find()) {
      await taskRepo.save({ ...task, completed });
    }
  }
}

You can see a working example at a code sandbox I've created at:
https://codesandbox.io/p/sandbox/interesting-feistel-poit6u?file=%2Fsrc%2Fshared%2FTasksController.ts

Of course, I'm still working on the original issue you reported.

Please let me know that the workaround also works for you

[quangtynu]

Ok, I found out:
modified code in file "src/shared/TasksController.ts" 👍
Origin code as described in:
https://remult.dev/tutorials/react-next/backend-methods.html#refactor-from-front-end-to-back-end

import { BackendMethod, remult } from "remult";
import { Task } from "./Task";

export class TasksController {
@BackendMethod({ allowed: true })
static async setAll(completed: boolean) {
const taskRepo = remult.repo(Task);

  for (const task of await taskRepo.find()) {
     await taskRepo.save({ ...task, completed });
  }

}
}
//---------------------------------
to this:

import { BackendMethod, Remult } from "remult";
import { Task } from "./Task";

export class TasksController {
@BackendMethod({ allowed: true })
static async setAll(completed: boolean, remult?: Remult) {
const taskRepo = remult!.repo(Task);

  for (const task of await taskRepo.find()) {
     await taskRepo.save({ ...task, completed });
  }

}
}

//---------------------------------
as described in:
https://remult.dev/docs/backendMethods.html#static-backend-method
it works now. But i dont interstand.

[quangtynu]

Thank you for Your explain. it nice for me now. actually I also try to find into how its works.

[quangtynu]

Now i come to: "Frontend setup" of "Authentication and Authorization" part:
https://remult.dev/tutorials/react-next/auth.html#user-authentication

the error in "pages/index.tsx" is on the browser:

Server Error
Error: [next-auth]: useSession must be wrapped in a

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/index.tsx (19:38) @ Home

17 |
18 | const Home: NextPage = () => {

19 | const { data: session } = useSession();
| ^
20 |
21 | const [tasks, setTasks] = useState<Task[]>([]);
22 | const [hideCompleted, setHideCompleted] = useState(false);
Show collapsed frames

[yoni-rapoport]

It seems that in the current version of next-auth you have to add a <SessionProvider> to the _app.tsx for useSession() to work.

https://next-auth.js.org/getting-started/client#sessionprovider

We need to fix the tutorial to reflect that. Thanks!

[noam-honig]

@quangtynu, I've fixed the original "async_hooks" error you've got and released a new version for it:
https://github.com/remult/remult/releases/tag/v0.17.0

If you can try it out and let me know - it'll be great.

Thanks