├── api
│   ├── db
│   │   └── schema.prisma
│   ├── dist
│   ├── src
│   │   ├── directives
│   │   │   ├── requireAuth
│   │   │   └── skipAuth
│   │   ├── functions
│   │   │   └── graphql.ts
│   │   ├── graphql
│   │   ├── lib
│   │   │   ├── auth.ts
│   │   │   ├── db.ts
│   │   │   └── logger.ts
│   │   └── services
│   └── types
│
├── scripts
│   └── seed.ts
│
└── web
    ├── public
    │   ├── favicon.png
    │   ├── README.md
    │   └── robots.txt
    └── src
        ├── components
        ├── layouts
        ├── pages
        │   ├── FatalErrorPage
        │   │   └── FatalErrorPage.tsx
        │   └── NotFoundPage
        │       └── NotFoundPage.tsx
        ├── App.tsx
        ├── index.css
        ├── index.html
        └── Routes.tsx

yarn redwood generate page home /

yarn redwood generate page home /
(node:14307) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  ✔ Generating page files...
    ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.stories.tsx`
    ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.test.tsx`
    ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.tsx`
  ✔ Updating routes file...
  ✔ Generating types...
  ✔ One more thing...

    Page created! A note about <MetaTags>:

    At the top of your newly created page is a <MetaTags> component,
    which contains the title and description for your page, essential
    to good SEO. Check out this page for best practices:

    https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
+      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

yarn redwood generate page about

import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />

      <header>
        <h1>Redwood Blog</h1>
        <nav>
          <ul>
            <li>
+              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>Home</main>
    </>
  )
}

export default HomePage

import { Link, routes } from '@redwoodjs/router'

// ~~ 省略 ~~

<Link to={routes.about()}>About</Link>

      <Route path="/about" page={AboutPage} name="about" />

yarn redwood g layout blog

  ✔ Generating layout files...
    ✔ Successfully wrote file `./web/src/layouts/BlogLayout/BlogLayout.test.tsx`
    ✔ Successfully wrote file `./web/src/layouts/BlogLayout/BlogLayout.stories.tsx`
    ✔ Successfully wrote file `./web/src/layouts/BlogLayout/BlogLayout.tsx`

type BlogLayoutProps = {
  children?: React.ReactNode
}

const BlogLayout = ({ children }: BlogLayoutProps) => {
  return <>{children}</>
}

export default BlogLayout

import { Router, Route, Set } from '@redwoodjs/router'
import BlogLayout from 'src/layouts/BlogLayout'

const Routes = () => {
  return (
    <Router>
      <Set wrap={BlogLayout}>
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      </Set>
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider      = "prisma-client-js"
  binaryTargets = "native"
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}

yarn rw prisma migrate dev

yarn rw prisma studio

yarn rw g scaffold post

yarn rw g cell Articles

  ✔ Generating cell files...
    ✔ Successfully wrote file `./web/src/components/ArticlesCell/ArticlesCell.mock.ts`
    ✔ Successfully wrote file `./web/src/components/ArticlesCell/ArticlesCell.test.tsx`
    ✔ Successfully wrote file `./web/src/components/ArticlesCell/ArticlesCell.stories.tsx`
    ✔ Successfully wrote file `./web/src/components/ArticlesCell/ArticlesCell.tsx`

import type { ArticlesQuery } from 'types/graphql'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

export const QUERY = gql`
  query ArticlesQuery {
    articles {
      id
    }
  }
`

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>
)

export const Success = ({ articles }: CellSuccessProps<ArticlesQuery>) => {
  return (
    <ul>
      {articles.map((item) => {
        return <li key={item.id}>{JSON.stringify(item)}</li>
      })}
    </ul>
  )
}

<Route path="/article/{id}" page={ArticlePage} name="article" />

<h2>
  <Link to={routes.article({ id: article.id })}>{article.title}</Link>
</h2>

<Route path="/article/{id:Int}" page={ArticlePage} name="article" />

import {
  FieldError,
  Form,
  Label,
  Submit,
  SubmitHandler,
  TextAreaField,
  TextField
} from '@redwoodjs/forms'
import { MetaTags } from '@redwoodjs/web'

type FormValues = {
  name: string
  email: string
  message: string
}

const ContactPage = () => {
  const onSubmit: SubmitHandler<FormValues> = (data) => {
    console.log(data)
  }

  return (
    <>
      <MetaTags title="Contact" description="Contact page" />

      <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }}>
        <Label name="name" errorClassName="error">
          Name
        </Label>
        <TextField
          name="name"
          validation={{ required: true }}
          errorClassName="error"
        />
        <FieldError name="name" className="error" />

        <Label name="email" errorClassName="error">
          Email
        </Label>
        <TextField
          name="email"
          validation={{
            required: true,
            pattern: {
              value: /^[^@]+@[^.]+\..+$/,
              message: 'Please enter a valid email address',
            },
          }}
          errorClassName="error"
        />
        <FieldError name="email" className="error" />

        <Label name="message" errorClassName="error">
          Message
        </Label>
        <TextAreaField
          name="message"
          validation={{ required: true }}
          errorClassName="error"
        />
        <FieldError name="message" className="error" />

        <Submit>Save</Submit>
      </Form>
    </>
  )
}

export default ContactPage

yarn rw g sdl Contact

  ✔ Generating SDL files...
    ✔ Successfully wrote file `./api/src/graphql/contacts.sdl.ts`
    ✔ Successfully wrote file `./api/src/services/contacts/contacts.scenarios.ts`
    ✔ Successfully wrote file `./api/src/services/contacts/contacts.test.ts`
    ✔ Successfully wrote file `./api/src/services/contacts/contacts.ts`
  ✔ Generating types ...

export const schema = gql`
  type Contact {
    id: Int!
    name: String!
    email: String!
    message: String!
    createdAt: DateTime!
  }

  type Query {
    contacts: [Contact!]! @requireAuth
    contact(id: Int!): Contact @requireAuth
  }

  input CreateContactInput {
    name: String!
    email: String!
    message: String!
  }

  input UpdateContactInput {
    name: String
    email: String
    message: String
  }

  type Mutation {
    createContact(input: CreateContactInput!): Contact! @requireAuth
    updateContact(id: Int!, input: UpdateContactInput!): Contact! @requireAuth
    deleteContact(id: Int!): Contact! @requireAuth
  }

  type Mutation {
+    createContact(input: CreateContactInput!): Contact! @skipAuth
  }

import { db } from 'src/lib/db'
import type { QueryResolvers, MutationResolvers } from 'types/graphql'

export const contacts: QueryResolvers['contacts'] = () => {
  return db.contact.findMany()
}

export const contact: QueryResolvers['contact'] = ({ id }) => {
  return db.contact.findUnique({
    where: { id },
  })
}

export const createContact: MutationResolvers['createContact'] = ({ input }) => {
  return db.contact.create({
    data: input,
  })
}

export const updateContact: MutationResolvers['updateContact'] = ({ id, input }) => {
  return db.contact.update({
    data: input,
    where: { id },
  })
}

export const deleteContact: MutationResolvers['deleteContact'] = ({ id }) => {
  return db.contact.delete({
    where: { id },
  })
}

+ import {
+   CreateContactMutation,
+   CreateContactMutationVariables
+ } from 'types/graphql'

import {
  FieldError,
  Form,
  Label,
  Submit,
  SubmitHandler,
  TextAreaField,
  TextField
} from '@redwoodjs/forms'
+ import { MetaTags, useMutation } from '@redwoodjs/web'

+ const CREATE_CONTACT = gql`
+   mutation CreateContactMutation($input: CreateContactInput!) {
+     createContact(input: $input) {
+       id
+     }
+   }
+ `

type FormValues = {
  name: string
  email: string
  message: string
}

const ContactPage = () => {
+   const [create] = useMutation<
+     CreateContactMutation,
+     CreateContactMutationVariables
+   >(CREATE_CONTACT)

  const onSubmit: SubmitHandler<FormValues> = (data) => {
+     create({
+       variables: {
+         input: data,
+       },
+     })
  }

  return (
    <>
      <MetaTags title="Contact" description="Contact page" />

      <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }}>
        <Label name="name" errorClassName="error">
          Name
        </Label>
        <TextField
          name="name"
          validation={{ required: true }}
          errorClassName="error"
        />
        <FieldError name="name" className="error" />

        <Label name="email" errorClassName="error">
          Email
        </Label>
        <TextField
          name="email"
          validation={{
            required: true,
            pattern: {
              value: /^[^@]+@[^.]+\..+$/,
              message: 'Please enter a valid email address',
            },
          }}
          errorClassName="error"
        />
        <FieldError name="email" className="error" />

        <Label name="message" errorClassName="error">
          Message
        </Label>
        <TextAreaField
          name="message"
          validation={{ required: true }}
          errorClassName="error"
        />
        <FieldError name="message" className="error" />

        <Submit>Save</Submit>
      </Form>
    </>
  )
}

export default ContactPage

  const [create, { loading, error }] = useMutation<
    CreateContactMutation,
    CreateContactMutationVariables
  >(CREATE_CONTACT)


// ~~~ 省略 ~~~

        <Submit disabled={loading}>Save</Submit>

+ import { toast, Toaster } from '@redwoodjs/web/toast'

//  ~~~ 省略 ~~~

  const [create, { loading, error }] = useMutation<
    CreateContactMutation,
    CreateContactMutationVariables
  >(CREATE_CONTACT, {
+     onCompleted: () => {
+       toast.success('Thank you for your submission!')
+     },
  })

//  ~~~ 省略 ~~~

+       <Toaster />
      <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }}>

import type { Prisma } from '@prisma/client'

import { validate } from '@redwoodjs/api'

// ...

export const createContact = ({ input }: CreateContactArgs) => {
  validate(input.email, 'email', { email: true })
  return db.contact.create({ data: input })
}

import {
  FieldError,
  Form,
+   FormError,
  Label,
  TextField,
  TextAreaField,
  Submit,
  SubmitHandler,
} from '@redwoodjs/forms'

// ...

  const [create, { loading, error }] = useMutation<
    CreateContactMutation,
    CreateContactMutationVariables
  >(CREATE_CONTACT, {
    onCompleted: () => {
      toast.success('Thank you for your submission!')
    },
  })


// ...

+       <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }} error={error}>
+         <FormError error={error} wrapperClassName="form-error" />

import {
  FieldError,
  Form,
  FormError,
  Label,
  Submit,
  TextAreaField,
  TextField,
+   useForm,
} from '@redwoodjs/forms'

// ...

const ContactPage = () => {
+   const formMethods = useForm({
+     mode: 'onBlur',
+   })
  const [create, { loading, error }] = useMutation<
    CreateContactMutation,
    CreateContactMutationVariables
  >(CREATE_CONTACT, {
    onCompleted: () => {
      toast.success('Thank you for your submission!')
+       formMethods.reset()
    },
  })

// ...

return (
  <>
    <Toaster />
    <Form
      onSubmit={onSubmit}
      config={{ mode: 'onBlur' }}
      error={error}
      formMethods={formMethods}
    >

// ...

yarn rw setup auth dbAuth

model User {
  id                  Int       @id @default(autoincrement())
  name                String?
  email               String    @unique
  hashedPassword      String
  salt                String
  resetToken          String?
  resetTokenExpiresAt DateTime?
}

+import { Private, Router, Route, Set } from '@redwoodjs/router'
import PostsLayout from 'src/layouts/PostsLayout'
import BlogLayout from 'src/layouts/BlogLayout'

const Routes = () => {
  return (
    <Router>
+      <Private unauthenticated="home">
        <Set wrap={PostsLayout}>
          <Route path="/admin/posts/new" page={PostNewPostPage} name="newPost" />
          <Route path="/admin/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
          <Route path="/admin/posts/{id:Int}" page={PostPostPage} name="post" />
          <Route path="/admin/posts" page={PostPostsPage} name="posts" />
        </Set>
+      </Private>
      <Set wrap={BlogLayout}>
        <Route path="/article/{id:Int}" page={ArticlePage} name="article" />
        <Route path="/contact" page={ContactPage} name="contact" />
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      </Set>
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

  type Query {
    posts: [Post!]! @requireAuth
    post(id: Int!): Post @requireAuth
  }

  type Query {
+    posts: [Post!]! @skipAuth
+    post(id: Int!): Post @requireAuth
  }

yarn rw g dbAuth

+import { useAuth } from '@redwoodjs/auth'
import { Link, routes } from '@redwoodjs/router'

type BlogLayoutProps = {
  children?: React.ReactNode
}

const BlogLayout = ({ children }: BlogLayoutProps) => {
+  const { isAuthenticated, currentUser, logOut } = useAuth()

  return (
    <>
      <header>
        <div className="flex-between">
          <h1>
            <Link to={routes.home()}>Redwood Blog</Link>
          </h1>
+          {isAuthenticated ? (
+            <div>
+              <span>Logged in as {currentUser.email}</span>{' '}
+              <button type="button" onClick={logOut}>
+                Logout
+              </button>
+            </div>
+          ) : (
+            <Link to={routes.login()}>Login</Link>
+          )}
        </div>
        <nav>
          <ul>
            <li>
              <Link to={routes.home()}>Home</Link>
            </li>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
            <li>
              <Link to={routes.contact()}>Contact</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>{children}</main>
    </>
  )
}

export default BlogLayout

export const getCurrentUser = async (session) => {
  return await db.user.findUnique({
    where: { id: session.id },
    select: { id: true },
  })
}

export const getCurrentUser = async (session) => {
  return await db.user.findUnique({
    where: { id: session.id },
+    select: { id: true, email: true},
  })
}

SESSION_SECRET= big-random-string-of-numbers-and-letters

yarn rw g secret

DATABASE_URL=${postgresql の connection string}

provider = "postgresql"

yarn rw prisma migrate dev

yarn rw setup deploy netlify