To enable creation of new tasks, we will need two things:
- Wasp action that creates a new task.
- React form that calls that action with the new task's data.
Creating an action is very similar to creating a query.
First we declare the action in Wasp:
Next, we define a JS function for that action:
We put JS function in new file
ext/actions.js, but we could have put it anywhere we wanted, there are no limitations here, as long as the import statement in Wasp file is correct and it is inside
Here we call our action directly (no hooks) because we don't need any reactivity. The rest is just regular React code.
That's it! Try creating a "Build a Todo App in Wasp" task and see it appear in the list below. Task is created on the server and also saved in the database. Try refreshing the page or opening it in another browser - you'll see the tasks are still here!
Side note: Automatic invalidation/updating of queries
You will notice that when you create a new task, list of tasks is automatically updated with that new task, although we have written no code to take care of that! Normally, you would have to do this explicitly, e.g. with react-query you would invalidate the
getTasks query via its key, or would call its
The reason why
getTasks query automatically updates when
createTask action is executed is because Wasp is aware that both of them are working with
Task entity, and therefore assumes that action that operates on
Task (in this case
createTask) might have changed the result of
getTasks query. Therefore, in the background, Wasp nudges
getTasks query to update. This means that out of the box, Wasp will make sure that all your queries that deal with entities are always in sync with any changes that the actions might have done.
While this kind of approach to automatic invalidation of queries is very convenient, it is in some situations wasteful and could become a performance bottleneck as an app grows. In that case, you will be able to override this default behaviour and instead provide more detailed (and performant) instructions on how the specific action should affect queries. This is not yet implemented, but is something we plan to do and you can track the progress here (or even contribute!).