AxiosError
Hi!
I'm encountering an error where the simple query for the demo ToDoApp using an SQLite DB, does not connect to the DB to do the query. It should show "No tasks", but instead shows "Error: AxiosError: Network Error". Everything is running on a local server on Linux (ubuntu). Wasp version 0.13.0. The Wasp terminal does not show any output on this error. Running "wasp db studio" allows me to see the database, and I was able to enter a single row through the :5555 interface.
Any idea what might be going wrong here? It's like the prisma interface in wasp doesn't know how to query an sqlite db, but I don't know how to get any debug logs. Any ideas? Thanks!
9 Replies
Hey Chad. Could you give us more detail about your app / share the code that isn't working (client and server)
Any idea what might be going wrong here? It's like the prisma interface in wasp doesn't know how to query an sqlite db, but I don't know how to get any debug logs. Any ideas?Hey @chad.bohlmann, I second what Vinny said 🙂
It's like the prisma interface in wasp doesn't know how to query an sqlite db, but I don't know how to get any debug logs. Any ideas?Also, this is most likely not the case. You're getting a network error, which means that the client and the server are having trouble communicating. But yes, we'll need more details (for now: the code on both sides, a screenshot of the failing request in your browser's devtools).
Thanks Vinny and sodic! I'm following the tutorial at wasp-lang.dev/docs/tutorial. Here's main.wasp:
pp TodoApp {
wasp: {
version: "^0.13.0"
},
title: "TodoApp"
}
route RootRoute { path: "/", to: MainPage }
page MainPage {
component: import { MainPage } from "@src/MainPage"
}
entity Task {=psl
id Int @id @default(autoincrement())
description String
isDone Boolean @default(false)
psl=}
query getTasks {
fn: import { getTasks } from "@src/queries",
entities: [Task]
}
action createTask {
fn: import { createTask } from "@src/actions",
entities: [Task]
}
queries.js:
export const getTasks = async (args, context) => {
return context.entities.Task.findMany({
orderBy: { id: 'asc' }
})
}
MainPage.jsx:
import {
createTask,
getTasks,
useQuery
} from 'wasp/client/operations'
export const MainPage = () => {
const { data: tasks, isLoading, error } = useQuery(getTasks)
return (
<div>
{tasks && <TasksList tasks={tasks} />}
{isLoading && 'Loading...'}
{error && 'Error: ' + error}
</div>
)
}
const TaskView = ({ task }) => {
return (
<div>
<input type="checkbox" id={String(task.id)} checked={task.isDone} />
{task.description}
</div>
)
}
const TasksList = ({ tasks }) => {
if (!tasks?.length) return <div>No tasks</div>
return (
<div>
{tasks.map((task, idx) => (
<TaskView task={task} key={idx} />
))}
</div>
)
}
const NewTaskForm = () => {
const handleSubmit = async (event) => {
event.preventDefault()
try {
const target = event.target
const description = target.description.value
target.reset()
await createTask({ description })
} catch (err) {
window.alert ('Error: ' + err.message)
}
}
return (
<form onSubmit={handleSubmit}>
<input name="description" type="text" defaultValue="" />
<input type="submit" value="Create task" />
</form>
)
}
and actions.js:
Wohooo @chad.bohlmann, you just became a Waspeteer level 1!
export const createTask = async (args, context) => {
return context.entities.Task.create({
data: { description: args.description },
})
}
Here's the client side in web browser:
It complains of an error on a post to localhost port 3001. I don't know what would be running there. This client is a different machine (192.168.4.68) than the server (192.168.4.1).
@chad.bohlmann
Hm, how are you running the app if they're on different machines? Did you deploy them?
If so, you should tweak the URL on your client (it's attempting to reach localhost:30001, but should instead be reaching your server's IP and port, 192.168.4.1:<your port>)
Here's the docs on how to set the server url on the client app: https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend
Deploying Manually | Wasp
This document explains how to build and prepare your Wasp app for deployment.