Wasp-lang•2mo ago

Understanding api/ backend communication

Hey guys, let me preface this with I am a complete hack, still working to learn js, much less node/ react, so I'm hitting above my pay grade messing around with WASP and open-saas. I'm trying to come to grips with how WASP and open-saas handle the backend stuff from the front end. In node, I had services set up for my components and also an api with api endpoints. I'm under the impression that this setup is replaced by the operations setup? I notice operations files with the TSX files that require backend services, but I'm not sure how to register these operations files and how that relays to the server side in wasp/server/operations. Am I anywhere close? What am I missing/ misunderstanding? Any help would be amazing.

3 Replies

kapa.ai•2mo ago

Hi @randopixel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're on the right track! In Wasp, the default client-server interaction mechanism is through Operations. However, if you need a specific URL method/path, or a specific response, Operations may not be suitable for you. For these cases, you can use an api. APIs are used to tie a JS function to a certain endpoint e.g. POST /something/special. They are distinct from Operations and have no client-side helpers (like useQuery). To create a Wasp API, you must: 1. Declare the API in Wasp using the api declaration 2. Define the API's NodeJS implementation After completing these two steps, you'll be able to call the API from the client code (via the Axios wrapper), or from the outside world. Here is an example of how to declare an API in Wasp:

// main.wasp

// ...  
  
api fooBar { // APIs and their implementations don't need to (but can) have the same name.  
 fn: import { fooBar } from "@src/apis",  
 httpRoute: (GET, "/foo/bar")  
}

// main.wasp

// ...  
  
api fooBar { // APIs and their implementations don't need to (but can) have the same name.  
 fn: import { fooBar } from "@src/apis",  
 httpRoute: (GET, "/foo/bar")  
}

For client-side operations, you can import the CRUD operations from wasp/client/crud by importing the {crud name} object. For example, if you have a CRUD called Tasks, you would import the operations like this:

import { Tasks } from 'wasp/client/crud'

import { Tasks } from 'wasp/client/crud'

You can then access the operations like this:

const { data } = Tasks.getAll.useQuery()  
const { data } = Tasks.get.useQuery({ id: 1 })  
const createAction = Tasks.create.useAction()  
const updateAction = Tasks.update.useAction()  
const deleteAction = Tasks.delete.useAction()

const { data } = Tasks.getAll.useQuery()  
const { data } = Tasks.get.useQuery({ id: 1 })  
const createAction = Tasks.create.useAction()  
const updateAction = Tasks.update.useAction()  
const deleteAction = Tasks.delete.useAction()

All CRUD operations are implemented with Queries and Actions (https://wasp-lang.dev/docs/data-model/operations/overview) under the hood, which means they come with all the features you'd expect (e.g., automatic SuperJSON serialization, full-stack type safety when using TypeScript). For more detailed information, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/advanced/apis). I hope this helps! If you have more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @randopixel, 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?

Vinny (@Wasp)•2mo ago

Hey @randopixel you’re right that operations are the Wasp equivalent of your typical CRUD operations on the back end. I’d suggest going through the intro tutorial in the wasp docs. It demonstrates the major features of the framework in about 30 minutes. The wasp config file is the central place where the operations you define are made available to use in your frontend. But like I said, the intro tutorial does a great job explaining all this.

randopixelOP•2mo ago

Hey Thanks! I'm working my way through things and the intro tutorial is helping for sure.

Gaming

Programming

Understanding api/ backend communication