Wasp-lang•2mo ago

syntax of importing from wasp

Hi I am pretty newbie to typescript and wasp, I have python experience though. I was asking chatgpt to create a simple function to try and call my python backend. I am in the process of combining them.

import { action } from '@wasp/actions'

export const analyzeData = action({
  run: async ({ data }) => {
    const response = await fetch('http://localhost:8000/analyze', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    return await response.json()
  }
})

import { action } from '@wasp/actions'

export const analyzeData = action({
  run: async ({ data }) => {
    const response = await fetch('http://localhost:8000/analyze', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    return await response.json()
  }
})

chatGPT suggested this, but I cant import like this its giving errors on running wasp start . Is chatGPT completely wrong or am I doing sth wrong, where can I find some documentation on how to do this correctly

5 Replies

kapa.ai•2mo ago

Hi @BeReal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like there's a misunderstanding about how to declare and use actions in Wasp. In Wasp, actions are declared in the Wasp language and implemented in JavaScript or TypeScript. The import syntax you're trying to use doesn't match the way Wasp handles actions. Here's the correct way to declare and implement an action in Wasp: 1. Declare the action in your .wasp file:

action analyzeData {
  fn: import { analyzeData } from "@src/actions.js"
}

action analyzeData {
  fn: import { analyzeData } from "@src/actions.js"
}

2. Implement the action in a JavaScript or TypeScript file in the src directory:

export const analyzeData = async ({ data }, context) => {
  const response = await fetch('<http://localhost:8000/analyze',> {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  return await response.json()
}

export const analyzeData = async ({ data }, context) => {
  const response = await fetch('<http://localhost:8000/analyze',> {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  return await response.json()
}

You can then use the action in your client-side code by importing it from wasp/client/operations:

import { analyzeData } from 'wasp/client/operations'

// ...
const result = await analyzeData({ data: myData })

import { analyzeData } from 'wasp/client/operations'

// ...
const result = await analyzeData({ data: myData })

For more information, you can refer to the Wasp documentation on actions (https://wasp-lang.dev/docs/data-model/operations/actions#working-with-actions). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @BeReal, 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•2mo ago

I'd suggest going through Wasp's tutorial to get a grasp of Wasp basics to speed up your learning 🙂 https://wasp-lang.dev/docs/tutorial/create ChatGPT is OK, but it lacks the latest info about Wasp. Kapa here knows a bit more - but it's best to read the docs and go through some of the example apps to get a feeling how things are done 🙂

1. Creating a New Project | Wasp

You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the QuickStart guide!

BeRealOP•2mo ago

Thanks yes think the opensaas template diving into was a bit too advanced

BeRealOP•2mo ago

Going to the tutorial did clarify a lot for me thanks for suggesting it @miho , its still not entirely clear to me though, do you understand how https://wasp-lang.dev/docs/tutorial/actions TasksList is used here to me it seems like it is undefined?

6. Modifying Data | Wasp

In the previous section, you learned about using Queries to fetch data.

miho•2mo ago

You can see in the comment:

// ... TaskList, TaskView, NewTaskForm ...

// ... TaskList, TaskView, NewTaskForm ...

We are not repeating all the code all the time, TasksList was created in the previous step of the tutorial 🙂 There the full code of the tutorial here: https://github.com/wasp-lang/wasp/tree/main/examples/tutorials/TodoAppTs

GitHub

wasp/examples/tutorials/TodoAppTs at main · wasp-lang/wasp

The fastest way to develop full-stack web apps with React & Node.js. - wasp-lang/wasp

Gaming

Programming

syntax of importing from wasp