TypeScript strict mode support + docs

__fixtures__/test-project/.gitignore

@@ -11,6 +11,7 @@ yarn-error.log
 web/public/mockServiceWorker.js
 web/types/graphql.d.ts
 api/types/graphql.d.ts
+api/src/lib/generateGraphiQLHeader.*
 .pnp.*
 .yarn/*
 !.yarn/patches

__fixtures__/test-project/api/src/directives/requireAuth/requireAuth.test.ts

@@ -12,8 +12,8 @@ describe('requireAuth directive', () => {
     // If you want to set values in context, pass it through e.g.
     // mockRedwoodDirective(requireAuth, { context: { currentUser: { id: 1, name: 'Lebron McGretzky' } }})
     const mockExecution = mockRedwoodDirective(requireAuth, {
-        context: { currentUser: { id: 1, roles: 'ADMIN', email: '[email protected]' } },
-      })
+      context: { currentUser: { id: 1, roles: 'ADMIN', email: '[email protected]' } },
+    })
 
     expect(mockExecution).not.toThrowError()
   })

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

@@ -1,9 +1,15 @@
-import { db } from 'src/lib/db'
+import type { APIGatewayProxyEvent, Context } from 'aws-lambda'
+
 import { DbAuthHandler } from '@redwoodjs/api'
+import type { DbAuthHandlerOptions } from '@redwoodjs/api'
 
-export const handler = async (event, context) => {
+import { db } from 'src/lib/db'
 
-  const forgotPasswordOptions = {
+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
@@ -33,7 +39,7 @@ export const handler = async (event, context) => {
     },
   }
 
-  const loginOptions = {
+  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
@@ -62,13 +68,13 @@ export const handler = async (event, context) => {
     expires: 60 * 60 * 24 * 365 * 10,
   }
 
-  const resetPasswordOptions = {
+  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
@@ -86,7 +92,7 @@ export const handler = async (event, context) => {
     },
   }
 
-  const signupOptions = {
+  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/functions/graphql.ts

@@ -2,12 +2,11 @@ import { createGraphQLHandler } from '@redwoodjs/graphql-server'
 
 import directives from 'src/directives/**/*.{js,ts}'
 import sdls from 'src/graphql/**/*.sdl.{js,ts}'
+import { getCurrentUser } from 'src/lib/auth'
 import { db } from 'src/lib/db'
 import { logger } from 'src/lib/logger'
 import services from 'src/services/**/*.{js,ts}'
 
-import { getCurrentUser } from 'src/lib/auth'
-
 export const handler = createGraphQLHandler({
   getCurrentUser,
   loggerConfig: { logger, options: {} },

__fixtures__/test-project/api/src/graphql/contacts.sdl.ts

@@ -27,6 +27,6 @@ export const schema = gql`
   type Mutation {
     createContact(input: CreateContactInput!): Contact @skipAuth
     updateContact(id: Int!, input: UpdateContactInput!): Contact! @requireAuth
-    deleteContact(id: Int!): Contact! @requireAuth(roles:["ADMIN"])
+    deleteContact(id: Int!): Contact! @requireAuth(roles: ["ADMIN"])
   }
 `

__fixtures__/test-project/api/src/graphql/posts.sdl.ts

@@ -8,7 +8,7 @@ export const schema = gql`
 
   type Query {
     posts: [Post!]! @skipAuth
-      post(id: Int!): Post @skipAuth
+    post(id: Int!): Post @skipAuth
   }
 
   input CreatePostInput {

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

@@ -1,4 +1,6 @@
+import type { DbAuthSession } from '@redwoodjs/api'
 import { AuthenticationError, ForbiddenError } from '@redwoodjs/graphql-server'
+
 import { db } from './db'
 
 /**
@@ -18,10 +20,10 @@ 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},
+    select: { id: true, roles: true, email: true },
   })
 }
 
@@ -71,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/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.0",
-    "tailwindcss": "^3.1.4"
+    "postcss-loader": "^7.0.1",
+    "tailwindcss": "^3.1.6"
   }
 }

__fixtures__/test-project/web/src/App.tsx

@@ -1,5 +1,4 @@
 import { AuthProvider } from '@redwoodjs/auth'
-
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 

__fixtures__/test-project/web/src/Routes.tsx

@@ -9,41 +9,42 @@
 
 import { Router, Route, Private, Set } from '@redwoodjs/router'
 
+import BlogLayout from 'src/layouts/BlogLayout'
 import ContactsLayout from 'src/layouts/ContactsLayout'
-
-import PostsLayout from 'src/layouts/PostsLayout';
-
-import HomePage from "src/pages/HomePage";
-import BlogLayout from "src/layouts/BlogLayout";
+import PostsLayout from 'src/layouts/PostsLayout'
+import HomePage from 'src/pages/HomePage'
 
 const Routes = () => {
   return (
-    (<Router>
+    <Router>
       <Route path="/login" page={LoginPage} name="login" />
       <Route path="/signup" page={SignupPage} name="signup" />
       <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
       <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
       <Set wrap={ContactsLayout}>
-            <Route path="/contacts/new" page={ContactNewContactPage} name="newContact" />
-            <Route path="/contacts/{id:Int}/edit" page={ContactEditContactPage} name="editContact" />
-            <Route path="/contacts/{id:Int}" page={ContactContactPage} name="contact" />
-            <Route path="/contacts" page={ContactContactsPage} name="contacts" />
+        <Route path="/contacts/new" page={ContactNewContactPage} name="newContact" />
+        <Route path="/contacts/{id:Int}/edit" page={ContactEditContactPage} name="editContact" />
+        <Route path="/contacts/{id:Int}" page={ContactContactPage} name="contact" />
+        <Route path="/contacts" page={ContactContactsPage} name="contacts" />
       </Set>
       <Set wrap={PostsLayout}>
-            <Route path="/posts/new" page={PostNewPostPage} name="newPost" />
-            <Route path="/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
-            <Route path="/posts/{id:Int}" page={PostPostPage} name="post" />
-            <Route path="/posts" page={PostPostsPage} name="posts" />
+        <Route path="/posts/new" page={PostNewPostPage} name="newPost" />
+        <Route path="/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
+        <Route path="/posts/{id:Int}" page={PostPostPage} name="post" />
+        <Route path="/posts" page={PostPostsPage} name="posts" />
       </Set>
       <Set wrap={BlogLayout}>
-        <Private unauthenticated="login"><Route path="/profile" page={ProfilePage} name="profile" /></Private>
+        <Private unauthenticated="login">
+          <Route path="/profile" page={ProfilePage} name="profile" />
+        </Private>
         <Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" />
         <Route path="/contact" page={ContactPage} name="contact" />
         <Route path="/about" page={AboutPage} name="about" prerender />
         <Route path="/" page={HomePage} name="home" prerender />
         <Route notfound page={NotFoundPage} prerender />
-      </Set></Router>)
-  );
+      </Set>
+    </Router>
+  )
 }
 
 export default Routes

__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx

@@ -1,7 +1,7 @@
 import BlogPost from './BlogPost'
 
-export const generated = () => {
-  return <BlogPost />
+export const generated = (args) => {
+  return <BlogPost {...args} />
 }
 
 export default { title: 'Components/BlogPost' }

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

@@ -1,41 +1,38 @@
-import { Link, routes } from "@redwoodjs/router";
 import { FindBlogPostQuery } from 'types/graphql'
 
+import { Link, routes } from '@redwoodjs/router'
 
 interface Props extends FindBlogPostQuery {}
 
-
 const BlogPost = ({ blogPost }: Props) => {
   return (
-
     <article>
-    {blogPost && (
-      <>
-        <header className="mt-4">
-          <p className="text-sm">
-            {new Intl.DateTimeFormat('en-US', {
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric',
-            }).format(new Date(blogPost.createdAt))}
-          </p>
-          <h2 className="text-xl mt-2 font-semibold">
-            <Link
-              className="hover:text-blue-600"
-              to={routes.blogPost({ id: blogPost.id })}
-            >
-              {blogPost.title}
-            </Link>
-          </h2>
-        </header>
-        <div className="mt-2 mb-4 text-gray-900 font-light">
-          {blogPost.body}
-        </div>
-      </>
-    )}
+      {blogPost && (
+        <>
+          <header className="mt-4">
+            <p className="text-sm">
+              {new Intl.DateTimeFormat('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              }).format(new Date(blogPost.createdAt))}
+            </p>
+            <h2 className="text-xl mt-2 font-semibold">
+              <Link
+                className="hover:text-blue-600"
+                to={routes.blogPost({ id: blogPost.id })}
+              >
+                {blogPost.title}
+              </Link>
+            </h2>
+          </header>
+          <div className="mt-2 mb-4 text-gray-900 font-light">
+            {blogPost.body}
+          </div>
+        </>
+      )}
     </article>
-
-  );
+  )
 }
 
 export default BlogPost

__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.mock.ts

@@ -2,8 +2,8 @@
 export const standard = (/* vars, { ctx, req } */) => ({
   blogPost: {
     id: 42,
-    title: "Mocked title",
-    body: "Mocked body",
-    createdAt: "2022-01-17T13:57:51.607Z"
+    title: 'Mocked title',
+    body: 'Mocked body',
+    createdAt: '2022-01-17T13:57:51.607Z',
   },
 })