From 7995c90505201803cb0c95db3da1195ba1b21dc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Sodi=C4=87?= Date: Wed, 12 Apr 2023 15:56:36 +0200 Subject: [PATCH] Update changelog (#1127) --- waspc/ChangeLog.md | 91 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 83 insertions(+), 8 deletions(-) diff --git a/waspc/ChangeLog.md b/waspc/ChangeLog.md index d655b47a8..6727b6f58 100644 --- a/waspc/ChangeLog.md +++ b/waspc/ChangeLog.md @@ -4,12 +4,87 @@ ### Breaking changes -- we changed `LoginForm` and `SignupForm` to use a named export instead of a default export, this means you must use them like this: +- We changed `LoginForm` and `SignupForm` to use a named export instead of a default export, this means you must use them like this: - `import { LoginForm } from '@wasp/auth/forms/Login'` - `import { SignupForm } from '@wasp/auth/Signup'` -- we renamed `useAuth.js` to `useAuth.ts` and you should import it like this: `import useAuth from '@wasp/auth/useAuth'` (without the `.js` extension) +- We renamed `useAuth.js` to `useAuth.ts` and you should import it like this: `import useAuth from '@wasp/auth/useAuth'` (without the `.js` extension) +- We changed the type arguments for `useQuery` and `useAction` hooks. They now take two arguments (the `Error` type argument was removed): + - `Input` - This type argument specifies the type for the **request's payload**. + - `Output` - This type argument specifies the type for the **resposne's payload**. -### Adds support for e-mail authentication +### Full-stack type safety for Operations +Frontend code can now infer correct payload/response types for Queries and Actions from their definitions on the server. + +Define a Query on the server: +```typescript +export const getTask: GetTaskInfo, Task> = + async ({ id }, context) => { + // ... + } +``` + +Get properly typed functions and data on the frontend: +```typescript +import { useQuery } from "@wasp/queries" +// Wasp knows the type of `getTask` thanks to your backend definition. +import getTask from "@wasp/queries/getTask" + +export const TaskInfo = () => { + const { + // TypeScript knows `task` is a `Task | undefined` thanks to the + // backend definition. + data: task, + // TypeScript knows `isError` is a `boolean`. + isError, + // TypeScript knows `error` is of type `Error`. + error, + // TypeScript knows the second argument must be a `Pick` thanks + // to the backend definition. + } = useQuery(getTask, { id: 1 }) + + if (isError) { + return
Error during fetching tasks: {error.message || "unknown"}
+ } + + // TypeScript forces you to perform this check. + return taskInfo === undefined ? ( +
Waiting for info...
+ ) : ( +
{taskInfo}
+ ) +} +``` +The same feature is available for Actions. + +### Payloads compatible with Superjson +Client and the server can now communicate with richer payloads. + +Return a Superjson-compatible object from your Operation: +```typescript +type FooInfo = { foos: Foo[], message: string, queriedAt: Date } + +const getFoos: GetFoo = (_args, context) => { + const foos = context.entities.Foo.findMany() + return { + foos, + message: "Here are some foos!", + queriedAt: new Date(), + } +} +``` +And seamlessly use it on the frontend: + +```typescript +import getfoos from "@wasp/queries/getTask" + +const { data } = useQuery(getfoos) +const { foos, message, queriedAt } = data +// foos: Foo[] +// message: string +// queriedAt: Date +``` + +### E-mail authentication You can now use e-mail authentication in your Wasp app! This means that users can sign up and log in using their e-mail address. You get e-mail verification and password reset out of the box. @@ -21,7 +96,7 @@ app MyApp { email: { fromField: { name: "ToDO App", - email: "mihovil@ilakovac.com" + email: "hello@itsme.com" }, emailVerification: { allowUnverifiedLogin: false, @@ -39,7 +114,7 @@ app MyApp { You can only use one of e-mail or username & password authentication in your app. You can't use both at the same time. -### Adds Auth UI components +### Auth UI components Wasp now provides a set of UI components for authentication. You can use them to quickly build a login and signup page for your app. The UI changes dynamically based on your Wasp config. @@ -53,7 +128,7 @@ import { ResetPasswordForm } from '@wasp/auth/forms/ResetPassword' import { VerifyEmailForm } from '@wasp/auth/forms/VerifyEmail' ``` -### Adds support for database seeding +### Database seeding You can now define JS/TS functions for seeding the database! ```c @@ -88,7 +163,7 @@ Run `wasp db seed` to run database seeding. If there is only one seed, it will r You can also do `wasp db seed ` to run a seed with specific name: for example, for the case above, you could do `wasp db seed prodSeed`. -### Adds an `api` keyword for defining an arbitrary endpoint and URL +### The `api` keyword for defining an arbitrary endpoint and URL Need a specific endpoint, like `/healthcheck` or `/foo/callback`? Or need complete control of the response? Use an `api` to define one by tying a JS function to any HTTP method and path! For example: ```ts // main.wasp @@ -107,7 +182,7 @@ export const fooBar : FooBar = (req, res, context) => { } ``` -### Adds support for sending e-mails +### E-mail sending support Wasp now supports sending e-mails! You can use the `emailSender` app property to configure the e-mail provider and optionally the `defaultFrom` address. Then, you can use the `send` function in your backend code to send e-mails.