Wasp-lang•4mo ago

share functions between server and client

Hi, I'm seeking clarification on how functions are shared between the server and client. According to the documentation, 'Operations' (like actions) are used to modify data in the database, with the functions being executed on the server side. My question is: can 'actions' be utilized to create server-side functions that do not interact with the database, or is it necessary to write the logic separately and then import it into client files? If the latter is correct, how does Wasp differentiate between server-side and client-side code? Thank you for your support!

4 Replies

kapa.ai•4mo ago

Hi @arghittu_thms. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, 'actions' are indeed used to modify data in the database and are executed on the server side. However, they are not limited to just database interactions. You can use actions to implement any server-side logic you need. Once you declare an action in Wasp and implement its NodeJS functionality, you can use it from anywhere in your code, either on the client or the server side source (https://wasp-lang.dev/docs/data-model/operations/actions#working-with-actions). Here is an example of declaring an action in Wasp:

// main.wasp
action createTask {  
 fn: import { createTask } from "@src/actions.js"  
}

// main.wasp
action createTask {  
 fn: import { createTask } from "@src/actions.js"  
}

And here is how you can use it in your code:

// On the client
import { createTask } from 'wasp/client/operations'  

// On the server
import { createTask } from 'wasp/server/operations'

// On the client
import { createTask } from 'wasp/client/operations'  

// On the server
import { createTask } from 'wasp/server/operations'

However, there is a difference when calling actions on the server side. When calling an action imported from wasp/server/operations, you need to pass a context that contains the user info. If your action doesn't require authentication, you should be able to pass an empty object source (https://discord.com/channels/686873244791210014/1218567315185209464). As for differentiating between server-side and client-side code, Wasp does not enforce a strict separation between client and server files in the src/ directory. This allows for flexibility in organizing larger projects by features. However, this also means that it's up to the developer to manage and keep track of which files are intended for the server and which are for the client source (https://github.com/wasp-lang/wasp/issues/1741). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @arghittu_thms, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•4mo ago

If you create a JS file with some functions and nothing in that file is server or client specific, you can just freely import it on the client and on the server. As soon as you start having some server specific code (e.g. DB calls) or client specific code (e.g. accessing browser properties) you can't really use it in both contexts any more. So, any shared logic is best kept in a separate file that you can reuse in client or server context where you can then use the server or client specific code.

arghittu_thmsOP•4mo ago

Ok, thanks for the clarification!

MEE6•4mo ago

Wohooo @arghittu_thms, you just became a Waspeteer level 1!

Gaming

Programming

share functions between server and client