From e023a6856aca8ebbad8fc2ae1118ba95fd8cd89d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Sodi=C4=87?= Date: Fri, 23 Feb 2024 14:42:19 +0100 Subject: [PATCH] Correct errors in tutorial --- web/docs/tutorial/01-create.md | 2 +- web/docs/tutorial/02-project-structure.md | 19 +++++++++++-------- web/docs/tutorial/03-pages.md | 4 ++-- web/docs/tutorial/04-entities.md | 2 +- web/docs/tutorial/05-queries.md | 6 +++--- web/docs/tutorial/06-actions.md | 8 ++++---- 6 files changed, 22 insertions(+), 19 deletions(-) diff --git a/web/docs/tutorial/01-create.md b/web/docs/tutorial/01-create.md index 2a511390de..46f1ba5f93 100644 --- a/web/docs/tutorial/01-create.md +++ b/web/docs/tutorial/01-create.md @@ -40,7 +40,7 @@ $ wasp start `wasp start` will take a bit of time to start the server the first time you run it in a new project. ::: -You will see log messages from the client, server, and database setting themselves up. When everything is ready, a new tab should open in your browser at `http://localhost:3000` with a simple placeholder plage: +You will see log messages from the client, server, and database setting themselves up. When everything is ready, a new tab should open in your browser at `http://localhost:3000` with a simple placeholder page: Screenshot of new Wasp app @@ -107,7 +108,9 @@ page MainPage { :::caution Using TypeScript The default project uses JavaScript. To use TypeScript, you must rename the file -`src/MainPage.jsx` to `src/MainPage.tsx`. (no updates to the `main.wasp` file are necessary). +`src/MainPage.jsx` to `src/MainPage.tsx`. + +No updates to the `main.wasp` file are necessary - it stays the same regardless of the language you use. ::: @@ -118,6 +121,6 @@ This file uses three declaration types: - **route**: Describes which path each page should be accessible from. -- **page**: Defines a web page and the React component that will gets rendered when the page is loaded. +- **page**: Defines a web page and the React component that gets rendered when the page is loaded. In the next section, we'll explore how **route** and **page** work together to build your web app. diff --git a/web/docs/tutorial/03-pages.md b/web/docs/tutorial/03-pages.md index 749a4bc3ce..a873e3e4c1 100644 --- a/web/docs/tutorial/03-pages.md +++ b/web/docs/tutorial/03-pages.md @@ -69,7 +69,7 @@ export const MainPage = () => { -Since Wasp uses React for the frontend, this is a normal functional React component. It also uses the CSS and logo image that sit next to it in the `src` folder. +This is a regular functional React component. It also uses the CSS file and a logo image that sit next to it in the `src` folder. That is all the code you need! Wasp takes care of everything else necessary to define, build, and run the web app. @@ -178,7 +178,7 @@ style={{ border: "1px solid black" }} /> -You can now delete redundant files: `src/Main.css`, `src/waspLogo.png`, and `src/HelloPage.{jsx,tsx}` (we won't be needing it). +You can now delete redundant files: `src/Main.css`, `src/waspLogo.png`, and `src/HelloPage.{jsx,tsx}` (we won't need this page for the rest of the tutorial). Since `src/HelloPage.{jsx,tsx}` no longer exists, remove its `route` and `page` declarations from the `main.wasp` file. diff --git a/web/docs/tutorial/04-entities.md b/web/docs/tutorial/04-entities.md index 2565c9d3d4..c33fa1bbfe 100644 --- a/web/docs/tutorial/04-entities.md +++ b/web/docs/tutorial/04-entities.md @@ -24,7 +24,7 @@ Wasp uses [Prisma](https://www.prisma.io) as a way to talk to the database. You Read more in the [Entities](../data-model/entities) section of the docs. ::: -To update the database schema to include this entity, stop the `wasp start` process, if its running, and run: +To update the database schema to include this entity, stop the `wasp start` process, if it's running, and run: ```sh wasp db migrate-dev diff --git a/web/docs/tutorial/05-queries.md b/web/docs/tutorial/05-queries.md index 8ddbfff026..f4a59d46d7 100644 --- a/web/docs/tutorial/05-queries.md +++ b/web/docs/tutorial/05-queries.md @@ -99,10 +99,10 @@ export const getTasks: GetTasks = async (args, context) => { } ``` -Wasp automatically generates the types `GetTasks` and `Task` based the contents of `main.wasp`: +Wasp automatically generates the types `GetTasks` and `Task` based on the contents of `main.wasp`: - `Task` is a type corresponding to the `Task` entity we've defined in `main.wasp`. -- `GetTasks` is a generic type Wasp automatically generated based the `getTasks` Query we've defined in `main.wasp`. +- `GetTasks` is a generic type Wasp automatically generated based on the `getTasks` Query we've defined in `main.wasp`. You can use these types to specify the Query's input and output types. This Query doesn't expect any arguments (its input type is `void`), but it does return an array of tasks (its output type is `Task[]`). @@ -127,7 +127,7 @@ Queries and Actions are NodeJS functions executed on the server. ## Invoking the Query On the Frontend -While we implement Queries on the server, Wasp generates client-side functions that automatically takes care of serialization, network calls, and chache invalidation, allowing you to call the server code like it's a regular function. +While we implement Queries on the server, Wasp generates client-side functions that automatically take care of serialization, network calls, and cache invalidation, allowing you to call the server code like it's a regular function. This makes it easy for us to use the `getTasks` Query we just created in our React component: diff --git a/web/docs/tutorial/06-actions.md b/web/docs/tutorial/06-actions.md index a4541a8f05..0174afc89b 100644 --- a/web/docs/tutorial/06-actions.md +++ b/web/docs/tutorial/06-actions.md @@ -179,7 +179,7 @@ Unlike Queries, you can call Actions directly (i.e., without wrapping it with a -Finally, because we've previously annotated the Action's backend implementation with the correct type, Wasp knows that the `createTask` Action expects a value of type `{ description: string }` (try changing the argument and reading the error message). Wasp also knows that a call to the `createTask` Action returns a `Task` but are not using it in this example. +Finally, because we've previously annotated the Action's server implementation with the correct type, Wasp knows that the `createTask` Action expects a value of type `{ description: string }` (try changing the argument and reading the error message). Wasp also knows that a call to the `createTask` Action returns a `Task` but are not using it in this example. @@ -265,7 +265,7 @@ style={{ border: "1px solid black" }}
:::note Automatic Query Invalidation -When you create a new task, the list of tasks is automatically updated to display the new task, even though we have not written any code that would do that! Wasp handles these automatic updates under the hood . +When you create a new task, the list of tasks is automatically updated to display the new task, even though we have not written any code that would do that! Wasp handles these automatic updates under the hood. When you declared the `getTasks` and `createTask` operations, you specified that they both use the `Task` entity. So when `createTask` is called, Wasp knows that the data `getTasks` fetches may have changed and automatically updates it in the background. This means that **out of the box, Wasp keeps all your queries in sync with any changes made through Actions**. @@ -274,11 +274,11 @@ This behavior is convenient as a default but can cause poor performance in large ## A Second Action -Our Todo app isn't finished if you can't mark a task as done! +Our Todo app isn't finished if you can't mark a task as done. We'll create a new Action to update a task's status and call it from React whenever a task's checkbox is toggled. -Since we've already created one task together, try to create this one yourself. It should be an Action named `updateTask` receives the task's `id` and its `isDone` status. You can see our implementation below. +Since we've already created one task together, try to create this one yourself. It should be an Action named `updateTask` that receives the task's `id` and its `isDone` status. You can see our implementation below.