Wasp-lang•5mo ago

Customize Entity for Client and Server Function

Hi, New to Wasp and tried to use OpenSaaS.sh. I want to add a simple function like Count Button Click. It increases by one and the data is stored in the db every time a button is clicked. How to achieve it with Wasp? I am not sure where to those functions and how to call it from the client. I used Vue, JS, Flutter before, not did not use React. Thanks.

6 Replies

kapa.ai•5mo ago

Hi @Nick. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can guide you on how to achieve this with Wasp. First, you need to define an Entity to store the count. You can do this in your Wasp file (main.wasp) as follows:

entity ClickCount {=psl
  id Int @id @default(autoincrement())
  count Int
psl=}

entity ClickCount {=psl
  id Int @id @default(autoincrement())
  count Int
psl=}

This will create a ClickCount entity with an id and count field. Next, you need to create an Action that will increment the count. You can do this in your Wasp file (main.wasp) as follows:

action incrementCount {
  fn: import { incrementCount } from "@src/clickCount/operations",
  entities: [ClickCount],
}

action incrementCount {
  fn: import { incrementCount } from "@src/clickCount/operations",
  entities: [ClickCount],
}

Then, you need to implement the incrementCount function in a new file src/clickCount/operations.js:

export const incrementCount = async ({ id }, context) => {
  const clickCount = await context.entities.ClickCount.findOne({ where: { id } })
  await context.entities.ClickCount.update({
    where: { id },
    data: { count: clickCount.count + 1 }
  })
}

export const incrementCount = async ({ id }, context) => {
  const clickCount = await context.entities.ClickCount.findOne({ where: { id } })
  await context.entities.ClickCount.update({
    where: { id },
    data: { count: clickCount.count + 1 }
  })
}

This function will find the ClickCount entity with the given id, and increment its count field by 1. Finally, you can call this Action from your client-side code. You can import it from wasp/client/operations and call it directly. Here's an example of how you can use it inside a React component:

import React from 'react'
import { incrementCount } from 'wasp/client/operations'

export const CountButton = ({ id }) => {
  const handleClick = async () => {
    await incrementCount({ id })
  }

  return (
    <button onClick={handleClick}>Click me</button>
  )
}

import React from 'react'
import { incrementCount } from 'wasp/client/operations'

export const CountButton = ({ id }) => {
  const handleClick = async () => {
    await incrementCount({ id })
  }

  return (
    <button onClick={handleClick}>Click me</button>
  )
}

This component will render a button, and every time the button is clicked, it will call the incrementCount Action, which will increment the count in the database. You can find more information about Entities and Actions in the Wasp documentation (https://wasp-lang.dev/docs/data-model/entities) and Wasp tutorial (https://wasp-lang.dev/docs/tutorial/actions). Since you mentioned you're not familiar with React, you might find it helpful to go through the React documentation (https://reactjs.org/docs/getting-started.html) or a tutorial to get a better understanding of how to work with React components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Nick, 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?

NickOP•5mo ago

How to do the query using name attribute, instead of id? Problem solved. Thanks.

Vinny (@Wasp)•5mo ago

Maybe clickCount.count + 1 is a valid solution, but just so you know, Prisma also has the increment method. This would save you having to make two trips to the DB:

await context.entities.ClickCount.update({
        where: { id },
        data: {
          count: {
            increment: numOfClicks, 
          },
        },
      });

await context.entities.ClickCount.update({
        where: { id },
        data: {
          count: {
            increment: numOfClicks, 
          },
        },
      });

NickOP•5mo ago

This is great. What should be the value of 'numOfClicks'?

Vinny (@Wasp)•5mo ago

For this simple example you could just use the number 1 instead of numOfClicks I just used the variable to show you it will add any value onto the current value using the increment method.

NickOP•5mo ago

Got it. Thanks.

Gaming

Programming

Customize Entity for Client and Server Function