TypeScript strict mode support + docs

__fixtures__/test-project/api/src/functions/auth.ts

@@ -1,10 +1,15 @@
+import type { APIGatewayProxyEvent, Context } from 'aws-lambda'
+
 import { DbAuthHandler } from '@redwoodjs/api'
+import type { DbAuthHandlerOptions } from '@redwoodjs/api'
 
 import { db } from 'src/lib/db'
 
-export const handler = async (event, context) => {
-  const forgotPasswordOptions = {
-    enabled: true,
+export const handler = async (
+  event: APIGatewayProxyEvent,
+  context: Context
+) => {
+  const forgotPasswordOptions: DbAuthHandlerOptions['forgotPassword'] = {
     // handler() is invoked after verifying that a user was found with the given
     // username. This is where you can send the user an email with a link to
     // reset their password. With the default dbAuth routes and field names, the
@@ -34,8 +39,7 @@ export const handler = async (event, context) => {
     },
   }
 
-  const loginOptions = {
-    enabled: true,
+  const loginOptions: DbAuthHandlerOptions['login'] = {
     // handler() is called after finding the user that matches the
     // username/password provided at login, but before actually considering them
     // logged in. The `user` argument will be the user in the database that
@@ -64,14 +68,13 @@ export const handler = async (event, context) => {
     expires: 60 * 60 * 24 * 365 * 10,
   }
 
-  const resetPasswordOptions = {
-    enabled: true,
+  const resetPasswordOptions: DbAuthHandlerOptions['resetPassword'] = {
     // handler() is invoked after the password has been successfully updated in
     // the database. Returning anything truthy will automatically log the user
     // in. Return `false` otherwise, and in the Reset Password page redirect the
     // user to the login page.
     handler: (user) => {
-      return user
+      return !!user
     },
 
     // If `false` then the new password MUST be different from the current one
@@ -89,8 +92,7 @@ export const handler = async (event, context) => {
     },
   }
 
-  const signupOptions = {
-    enabled: true,
+  const signupOptions: DbAuthHandlerOptions['signup'] = {
     // Whatever you want to happen to your data on new user signup. Redwood will
     // check for duplicate usernames before calling this handler. At a minimum
     // you need to save the `username`, `hashedPassword` and `salt` to your

__fixtures__/test-project/api/src/lib/auth.ts

@@ -1,3 +1,4 @@
+import type { DbAuthSession } from '@redwoodjs/api'
 import { AuthenticationError, ForbiddenError } from '@redwoodjs/graphql-server'
 
 import { db } from './db'
@@ -19,7 +20,7 @@ import { db } from './db'
  * fields to the `select` object below once you've decided they are safe to be
  * seen if someone were to open the Web Inspector in their browser.
  */
-export const getCurrentUser = async (session) => {
+export const getCurrentUser = async (session: DbAuthSession<number>) => {
   return await db.user.findUnique({
     where: { id: session.id },
     select: { id: true, roles: true, email: true },
@@ -72,7 +73,7 @@ export const hasRole = (roles: AllowedRoles): boolean => {
       return currentUserRoles?.some((allowedRole) =>
         roles.includes(allowedRole)
       )
-    } else if (typeof context.currentUser.roles === 'string') {
+    } else if (typeof context?.currentUser?.roles === 'string') {
       // roles to check is an array, currentUser.roles is a string
       return roles.some(
         (allowedRole) => context.currentUser?.roles === allowedRole

__fixtures__/test-project/api/src/services/contacts/contacts.scenarios.ts

@@ -1,4 +1,6 @@
-import type { Prisma } from '@prisma/client'
+import type { Prisma, Contact } from '@prisma/client'
+
+import type { ScenarioData } from '@redwoodjs/testing/api'
 
 export const standard = defineScenario<Prisma.ContactCreateArgs>({
   contact: {
@@ -7,4 +9,4 @@ export const standard = defineScenario<Prisma.ContactCreateArgs>({
   },
 })
 
-export type StandardScenario = typeof standard
+export type StandardScenario = ScenarioData<Contact, 'contact'>

__fixtures__/test-project/api/src/services/contacts/contacts.test.ts

@@ -1,3 +1,5 @@
+import type { Contact } from '@prisma/client'
+
 import {
   contacts,
   contact,
@@ -37,7 +39,7 @@ describe('contacts', () => {
   })
 
   scenario('updates a contact', async (scenario: StandardScenario) => {
-    const original = await contact({ id: scenario.contact.one.id })
+    const original = (await contact({ id: scenario.contact.one.id })) as Contact
     const result = await updateContact({
       id: original.id,
       input: { name: 'String2' },
@@ -47,7 +49,9 @@ describe('contacts', () => {
   })
 
   scenario('deletes a contact', async (scenario: StandardScenario) => {
-    const original = await deleteContact({ id: scenario.contact.one.id })
+    const original = (await deleteContact({
+      id: scenario.contact.one.id,
+    })) as Contact
     const result = await contact({ id: original.id })
 
     expect(result).toEqual(null)

__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts

@@ -1,4 +1,6 @@
-import type { Prisma } from '@prisma/client'
+import type { Prisma, Post } from '@prisma/client'
+
+import type { ScenarioData } from '@redwoodjs/testing/api'
 
 export const standard = defineScenario<Prisma.PostCreateArgs>({
   post: {
@@ -7,4 +9,4 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
   },
 })
 
-export type StandardScenario = typeof standard
+export type StandardScenario = ScenarioData<Post, 'post'>

__fixtures__/test-project/api/src/services/posts/posts.test.ts

@@ -1,3 +1,5 @@
+import type { Post } from '@prisma/client'
+
 import { posts, post, createPost, updatePost, deletePost } from './posts'
 import type { StandardScenario } from './posts.scenarios'
 
@@ -30,7 +32,7 @@ describe('posts', () => {
   })
 
   scenario('updates a post', async (scenario: StandardScenario) => {
-    const original = await post({ id: scenario.post.one.id })
+    const original = (await post({ id: scenario.post.one.id })) as Post
     const result = await updatePost({
       id: original.id,
       input: { title: 'String2' },
@@ -40,7 +42,7 @@ describe('posts', () => {
   })
 
   scenario('deletes a post', async (scenario: StandardScenario) => {
-    const original = await deletePost({ id: scenario.post.one.id })
+    const original = (await deletePost({ id: scenario.post.one.id })) as Post
     const result = await post({ id: original.id })
 
     expect(result).toEqual(null)

__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.tsx

@@ -25,7 +25,7 @@ export const Empty = () => <div>Empty</div>
 export const Failure = ({
   error,
 }: CellFailureProps<FindBlogPostQueryVariables>) => (
-  <div style={{ color: 'red' }}>Error: {error.message}</div>
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
 )
 
 export const Success = ({

__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx

@@ -20,7 +20,7 @@ export const Loading = () => <div>Loading...</div>
 export const Empty = () => <div>Empty</div>
 
 export const Failure = ({ error }: CellFailureProps) => (
-  <div style={{ color: 'red' }}>Error: {error.message}</div>
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
 )
 
 export const Success = ({ blogPosts }: CellSuccessProps<BlogPostsQuery>) => (

__fixtures__/test-project/web/src/components/Contact/Contact/Contact.tsx

@@ -1,4 +1,8 @@
 import humanize from 'humanize-string'
+import type {
+  Contact as ContactType,
+  DeleteContactMutationVariables,
+} from 'types/graphql'
 
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
@@ -23,15 +27,15 @@ const formatEnum = (values: string | string[] | null | undefined) => {
   }
 }
 
-const jsonDisplay = (obj) => {
+const jsonDisplay = (obj: unknown) => {
   return (
     <pre>
       <code>{JSON.stringify(obj, null, 2)}</code>
     </pre>
   )
 }
 
-const timeTag = (datetime) => {
+const timeTag = (datetime?: string) => {
   return (
     datetime && (
       <time dateTime={datetime} title={datetime}>
@@ -41,11 +45,15 @@ const timeTag = (datetime) => {
   )
 }
 
-const checkboxInputTag = (checked) => {
+const checkboxInputTag = (checked: boolean) => {
   return <input type="checkbox" checked={checked} disabled />
 }
 
-const Contact = ({ contact }) => {
+interface ContactProps {
+  contact: ContactType
+}
+
+const Contact = ({ contact }: ContactProps) => {
   const [deleteContact] = useMutation(DELETE_CONTACT_MUTATION, {
     onCompleted: () => {
       toast.success('Contact deleted')
@@ -56,7 +64,7 @@ const Contact = ({ contact }) => {
     },
   })
 
-  const onDeleteClick = (id) => {
+  const onDeleteClick = (id: DeleteContactMutationVariables['id']) => {
     if (confirm('Are you sure you want to delete contact ' + id + '?')) {
       deleteContact({ variables: { id } })
     }
@@ -67,7 +75,7 @@ const Contact = ({ contact }) => {
       <div className="rw-segment">
         <header className="rw-segment-header">
           <h2 className="rw-heading rw-heading-secondary">
-            Contact {contact.id} Detail
+            Contact {contact?.id} Detail
           </h2>
         </header>
         <table className="rw-table">
@@ -97,15 +105,15 @@ const Contact = ({ contact }) => {
       </div>
       <nav className="rw-button-group">
         <Link
-          to={routes.editContact({ id: contact.id })}
+          to={routes.editContact({ id: contact?.id })}
           className="rw-button rw-button-blue"
         >
           Edit
         </Link>
         <button
           type="button"
           className="rw-button rw-button-red"
-          onClick={() => onDeleteClick(contact.id)}
+          onClick={() => onDeleteClick(contact?.id)}
         >
           Delete
         </button>

__fixtures__/test-project/web/src/components/Contact/ContactCell/ContactCell.tsx

@@ -21,7 +21,7 @@ export const Loading = () => <div>Loading...</div>
 export const Empty = () => <div>Contact not found</div>
 
 export const Failure = ({ error }: CellFailureProps) => (
-  <div className="rw-cell-error">{error.message}</div>
+  <div className="rw-cell-error">{error?.message}</div>
 )
 
 export const Success = ({ contact }: CellSuccessProps<FindContactById>) => {

__fixtures__/test-project/web/src/components/Contact/ContactForm/ContactForm.tsx

@@ -1,3 +1,5 @@
+import type { Contact, UpdateContactInput } from 'types/graphql'
+
 import {
   Form,
   FormError,
@@ -6,10 +8,18 @@ import {
   TextField,
   Submit,
 } from '@redwoodjs/forms'
+import type { RWGqlError } from '@redwoodjs/forms'
+
+interface ContactFormProps {
+  contact?: Contact
+  onSave: (data: UpdateContactInput, id?: Contact['id']) => void
+  error: RWGqlError
+  loading: boolean
+}
 
-const ContactForm = (props) => {
-  const onSubmit = (data) => {
-    props.onSave(data, props?.contact?.id)
+const ContactForm = (props: ContactFormProps) => {
+  const onSubmit = (data: Record<string, any>) => {
+    props.onSave(data as Contact, props?.contact?.id)
   }
 
   return (

__fixtures__/test-project/web/src/components/Contact/Contacts/Contacts.tsx

@@ -1,4 +1,5 @@
 import humanize from 'humanize-string'
+import type { Contact, DeleteContactMutationVariables } from 'types/graphql'
 
 import { Link, routes } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
@@ -27,19 +28,19 @@ const formatEnum = (values: string | string[] | null | undefined) => {
   }
 }
 
-const truncate = (text) => {
-  let output = text
-  if (text && text.length > MAX_STRING_LENGTH) {
-    output = output.substring(0, MAX_STRING_LENGTH) + '...'
+const truncate = (value: string | number) => {
+  const output = value?.toString()
+  if (output?.length > MAX_STRING_LENGTH) {
+    return output.substring(0, MAX_STRING_LENGTH) + '...'
   }
-  return output
+  return output ?? ''
 }
 
-const jsonTruncate = (obj) => {
+const jsonTruncate = (obj: unknown) => {
   return truncate(JSON.stringify(obj, null, 2))
 }
 
-const timeTag = (datetime) => {
+const timeTag = (datetime?: string) => {
   return (
     datetime && (
       <time dateTime={datetime} title={datetime}>
@@ -49,11 +50,15 @@ const timeTag = (datetime) => {
   )
 }
 
-const checkboxInputTag = (checked) => {
+const checkboxInputTag = (checked: boolean) => {
   return <input type="checkbox" checked={checked} disabled />
 }
 
-const ContactsList = ({ contacts }) => {
+interface ContactsListProps {
+  contacts: Contact[]
+}
+
+const ContactsList = ({ contacts }: ContactsListProps) => {
   const [deleteContact] = useMutation(DELETE_CONTACT_MUTATION, {
     onCompleted: () => {
       toast.success('Contact deleted')
@@ -68,7 +73,7 @@ const ContactsList = ({ contacts }) => {
     awaitRefetchQueries: true,
   })
 
-  const onDeleteClick = (id) => {
+  const onDeleteClick = (id: DeleteContactMutationVariables['id']) => {
     if (confirm('Are you sure you want to delete contact ' + id + '?')) {
       deleteContact({ variables: { id } })
     }

__fixtures__/test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx

@@ -31,7 +31,7 @@ export const Empty = () => {
 }
 
 export const Failure = ({ error }: CellFailureProps) => (
-  <div className="rw-cell-error">{error.message}</div>
+  <div className="rw-cell-error">{error?.message}</div>
 )
 
 export const Success = ({ contacts }: CellSuccessProps<FindContacts>) => {

__fixtures__/test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx

@@ -1,4 +1,9 @@
-import type { EditContactById } from 'types/graphql'
+import type {
+  Contact,
+  EditContactById,
+  UpdateContactInput,
+  UpdateContactMutationVariables,
+} from 'types/graphql'
 
 import { navigate, routes } from '@redwoodjs/router'
 import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
@@ -33,7 +38,7 @@ const UPDATE_CONTACT_MUTATION = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Failure = ({ error }: CellFailureProps) => (
-  <div className="rw-cell-error">{error.message}</div>
+  <div className="rw-cell-error">{error?.message}</div>
 )
 
 export const Success = ({ contact }: CellSuccessProps<EditContactById>) => {
@@ -50,15 +55,15 @@ export const Success = ({ contact }: CellSuccessProps<EditContactById>) => {
     }
   )
 
-  const onSave = (input, id) => {
+  const onSave = (input: UpdateContactInput, id: Contact['id']) => {
     updateContact({ variables: { id, input } })
   }
 
   return (
     <div className="rw-segment">
       <header className="rw-segment-header">
         <h2 className="rw-heading rw-heading-secondary">
-          Edit Contact {contact.id}
+          Edit Contact {contact?.id}
         </h2>
       </header>
       <div className="rw-segment-main">