Wasp-lang•3mo ago

Question about client and server side data handling

So for my SaaS i have a big table (currently in postgressql) with products as entities if I tell this correct. So right now i have a test Table with the same format as my actual table but then with just test data in it. What I want is a page where the user/client sees all products and their data in a nice designed way. What is the best way of doing this? Before i thought i should deploy an API that connects to the db and then using this API i would dynamically fetch the data to create elements. I know that the boilerplate allows the actions/queries to get this data, but is this a good way for my application?

14 Replies

kapa.ai•3mo ago

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, using Wasp's actions and queries to fetch data from your database is a good way to handle data in your application. Wasp provides a higher-level concept called Automatic CRUD that can automatically generate server-side logic (i.e., Queries and Actions) for creating, reading, updating, and deleting Entities. This means you can easily fetch all your products from the database and display them on your page. Here's an example of how you can use the generated operations in your client code to fetch and display all tasks (you can replace tasks with products in your case):

import { Tasks } from 'wasp/client/crud'  
import { useState } from 'react'  
  
export const MainPage = () => {  
 const { data: tasks, isLoading, error } = Tasks.getAll.useQuery()  
 const createTask = Tasks.create.useAction()  
 const [taskDescription, setTaskDescription] = useState('')  
  
 function handleCreateTask() {  
 createTask({ description: taskDescription, isDone: false })  
 setTaskDescription('')  
 }  
  
 if (isLoading) return <div>Loading...</div>  
 if (error) return <div>Error: {error.message}</div>  
 return (  
 <div  
 style={{  
 fontSize: '1.5rem',  
 display: 'grid',  
 placeContent: 'center',  
 height: '100vh',  
 }}  
 >  
 <div>  
 <input  
 value={taskDescription}  
 onChange={(e) => setTaskDescription(e.target.value)}  
 />  
 <button onClick={handleCreateTask}>Create task</button>  
 </div>  
 <ul>  
 {tasks.map((task) => (  
 <li key={task.id}>{task.description}</li>  
 ))}  
 </ul>  
 </div>  
 )  
}

import { Tasks } from 'wasp/client/crud'  
import { useState } from 'react'  
  
export const MainPage = () => {  
 const { data: tasks, isLoading, error } = Tasks.getAll.useQuery()  
 const createTask = Tasks.create.useAction()  
 const [taskDescription, setTaskDescription] = useState('')  
  
 function handleCreateTask() {  
 createTask({ description: taskDescription, isDone: false })  
 setTaskDescription('')  
 }  
  
 if (isLoading) return <div>Loading...</div>  
 if (error) return <div>Error: {error.message}</div>  
 return (  
 <div  
 style={{  
 fontSize: '1.5rem',  
 display: 'grid',  
 placeContent: 'center',  
 height: '100vh',  
 }}  
 >  
 <div>  
 <input  
 value={taskDescription}  
 onChange={(e) => setTaskDescription(e.target.value)}  
 />  
 <button onClick={handleCreateTask}>Create task</button>  
 </div>  
 <ul>  
 {tasks.map((task) => (  
 <li key={task.id}>{task.description}</li>  
 ))}  
 </ul>  
 </div>  
 )  
}

In this example, Tasks.getAll.useQuery() is used to fetch all tasks from the database, and the tasks are then displayed in a list. You can do something similar with your products. You can find more information about using queries to fetch data in the Wasp documentation (https://wasp-lang.dev/docs/data-model/operations/queries). As for deploying an API that connects to the db, Wasp handles this for you. When you define your data model and operations in Wasp, it generates the necessary server-side code (including the API) and client-side code for you. This means you don't have to manually write and deploy an API yourself. Finally, if you're planning to deploy your app, Wasp provides instructions on how to manually deploy your app to Railway, which supports PostgreSQL, in their documentation (https://wasp-lang.dev/docs/advanced/deployment/manually#conclusion). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•3mo ago

@kapa.ai But is this secure? like if someone finds the endpoint that is not paying or something different will they be able to exploit it? Also there are alot of products in that table, and these cant be shown on one page so i would maybe implement a page system within the page. So that the user can click pages (but stays on the same route ofcourse). What do you guys recommend

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, Wasp provides several mechanisms to ensure the security of your application. 1. Authentication: Wasp supports various authentication methods including Email, Username & Password, Google, Github, and Keycloak. This allows you to restrict access to certain parts of your application to authenticated users. You can protect certain pages by setting authRequired: true for them. This will make sure that only logged-in users can access them. You can find more information about this in the Wasp Auth documentation (https://wasp-lang.dev/docs/auth/overview#available-auth-methods). 2. Authorization: In your server-side logic (i.e., Queries and Actions), you have access to the user object, which represents the currently logged-in user. You can use this to implement authorization checks. For example, you can check if the user has the necessary permissions to perform a certain action or access certain data. 3. HTTPS: Wasp recommends using HTTPS for all communication between the client and the server. This ensures that all data transmitted between the client and the server is encrypted and cannot be intercepted by malicious third parties. As for your second question, implementing a pagination system is a common solution for displaying large amounts of data. You can modify your queries to fetch a certain range of products based on the current page number. On the client side, you can then display buttons or links for navigating to different pages. Unfortunately, I don't have specific examples or code snippets for this from the provided knowledge sources, but you can find many resources and tutorials on how to implement pagination in React online. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•3mo ago

@Wasp Team any of you know?

martinsos•3mo ago

Hey @Sven ! Would you mind helping a bit explainig what your app does? I didn't quite get the details. So ok, you have users. And then you have entity Product? Ok, and then you want to what, have a page where User can see his Products? I guess he can also create / update / delete them somewhere. So yeah, you wuold have a page for showingi the product in let's say a visual table or list, and you would have Wasp Query for fethcing them. That Query would ensure it only catches Products taht belong to taht user. And nobody can else get those, because user has to be authenticated. Check out our tutorial here: https://wasp-lang.dev/docs/tutorial/auth -> this part shows how to make sure you fetch only stuff from your user. It is Task, not Product, but quite similar. Btw, you might also want to try playing with https://usemage.ai/ -> it often produces code with mistakes, but it can be good for ideating, to give you an idea of what your code could look like. Take with grain of salt though. Finally we have some examples apps here, they will also probably give you good ideas, some of them are quite simple so will be easy to understand: https://github.com/wasp-lang/wasp/tree/release/examples .

7. Adding Authentication | Wasp

Most modern apps need a way to create and authenticate users. Wasp makes this as easy as possible with its first-class auth support.

MAGE GPT Web App Generator ✨ MageGPT

Generate your full-stack React, Node.js and Prisma web app using the magic of GPT and the Wasp full-stack framework.

GitHub

wasp/examples at release · wasp-lang/wasp

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

SvenOP•3mo ago

thanks alot well basically it is a tool that allows users to track prodcuts to see the revenue for ecom but also all products that are tracked are put into a database which is accecable for every user this can be over couple of K products if not hundreds how could i best showcase this database on frontend? Like with e.g pages they can click where each page can show 100 producs or more or filter through products by revenue or sellig price but thanks @Wasp Team anyone?

shayne•3mo ago

Hi @Sven Martin is on Wasp Team 😃 you should get more help on Monday. Although I’m not sure they will be able to build it for you. More just help guide you.

SvenOP•3mo ago

Yeah ofcourse

shayne•3mo ago

Probably best to try and build something first and then come back once you have 👍🏻 It’s easier to help that way 💪🏻

SvenOP•3mo ago

Yeah but im buildong quite a big of a project ahah this is the only thing i wanted to know in advance to prevent scalinf issues

martinsos•3mo ago

Hey Sven! Yeah as @shayne said, happy to help, although these questions are quite specific to your app and it quite hard for us to tell you how you should best build it, it is quite subjective and dependent on your needs. You should be good on the scaling side with Wasp though. As for general question on designing an app like this, you will probably get the best results just chatting with GPT4 or a similar LLM, they will be able to provide you with personalized input, while we are yhour best bet for more Wasp-related questions.

SvenOP•3mo ago

Thanks alot! Something really different, but im smking a chrome ext supplementairy to the saas webapp. Any tips on how to do the auth for this chrome extension such that people who have acces can also use chrome ext

Milica•3mo ago

For separate questions it's better to start a new thread so Kappa can chime in. Is this something you'd find useful - https://discord.com/channels/686873244791210014/1223328118278983680

SvenOP•3mo ago

SOLVED!

Gaming

Programming

Question about client and server side data handling