Quick question about Wasp Operations

Are wasp operations exposed on the client?

4 Replies

Hi @ArDev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Wasp Operations are exposed on the client side. You can import them from wasp/client/operations and call them directly. This applies to both Queries and Actions. For example, if you have a Query getAllTasks and getFilteredTasks, you can use them like this:

import { getAllTasks, getFilteredTasks } from 'wasp/client/operations'  
  
const allTasks = await getAllTasks()  
const doneTasks = await getFilteredTasks({ isDone: true })

import { getAllTasks, getFilteredTasks } from 'wasp/client/operations'  
  
const allTasks = await getAllTasks()  
const doneTasks = await getFilteredTasks({ isDone: true })

Similarly, if you have an Action createTask and markTaskAsDone, you can use them like this:

import { createTask, markTaskAsDone } from 'wasp/client/operations'  
  
const newTask = await createTask({ description: 'Learn TypeScript' })  
await markTaskAsDone({ id: 1 })

import { createTask, markTaskAsDone } from 'wasp/client/operations'  
  
const newTask = await createTask({ description: 'Learn TypeScript' })  
await markTaskAsDone({ id: 1 })

You can also use Actions inside a component:

import React from 'react'  
import { useQuery, getTask, markTaskAsDone } from 'wasp/client/operations'  
  
export const TaskPage = ({ id }) => {  
 const { data: task } = useQuery(getTask, { id })  
  
 // ... rest of the component
}

import React from 'react'  
import { useQuery, getTask, markTaskAsDone } from 'wasp/client/operations'  
  
export const TaskPage = ({ id }) => {  
 const { data: task } = useQuery(getTask, { id })  
  
 // ... rest of the component
}

Please note that the usage doesn't change depending on whether you're on the server or the client. However, there is an open issue on GitHub discussing that users shouldn't import the actions and queries on the server from wasp/client/operation but rather from wasp/server/operations[^1^]. ^1^]: [GitHub Issue (https://github.com/wasp-lang/wasp/issues/1909) ^2^]: [Wasp Docs - Using Queries (https://wasp-lang.dev/docs/data-model/operations/queries#using-queries) ^3^]: [Wasp Docs - Using Actions (https://wasp-lang.dev/docs/data-model/operations/actions#using-actions) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ArDev, 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?

ArDev•2mo ago

@kapa.ai in an operation it sends queries to apis (exposing my api key) is it a vunreabilllity to do this?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Exposing sensitive information like API keys in client-side code is indeed a security vulnerability. This is because anyone can inspect the client-side code and potentially misuse the exposed keys. In Wasp, the recommended way to handle sensitive information like API keys is to store them in environment variables or configuration files that are not committed to the version control system. This way, they are not exposed in the client-side code and are only available on the server-side where they are needed. However, from the provided knowledge sources, there are open issues discussing the need to improve the handling of sensitive information in Wasp. For instance, there are discussions about not hardcoding JWT secrets in the backend code[^1^] and ensuring that the JWT secret comes from an environment or configuration file[^2^]. Please note that these are ongoing discussions and improvements might be made in future versions of Wasp. Always ensure to follow the best security practices when dealing with sensitive information. ^1^]: [Github Issue 129 (https://github.com/wasp-lang/wasp/issues/129) ^2^]: [Github Issue 87 (https://github.com/wasp-lang/wasp/issues/87) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ArDev, 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?

Filip•5w ago

Yes. In fact, that's one of Wasp's core features. Take a look at the docs for more details: https://wasp-lang.dev/docs/data-model/operations/overview

Overview | Wasp

While Entities enable you to define your app's data model and relationships, Operations are all about working with this data.

Gaming

Programming

Quick question about Wasp Operations