Zenn
🪵

redwoodjs備忘録

2023/03/30に公開
RedwoodJS
tech

ページ作成

ルートページをhomeという名前で作成する

コマンド

yarn rw generate page home /

出力

✔ 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

以下が行われるようです。

  • ページの作成
  • ルートの自動更新
  • typeの作成
    .redwood/typesにあり、routerの遷移でrouter.home()のように使えるようになる

Routes.tsxの更新結果

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

注意書きの日本語訳

ページを作成しました <MetaTags>についての注意点です。
新しく作成されたページの上部には、<MetaTags>コンポーネントがあります。これには、SEO対策に欠かせないページのタイトルと説明文が含まれています。
ベストプラクティスについては、こちらのページをご覧ください。

ルーティングなしで作成する

yarn rw generate page about

この場合は/aboutにルーティングされます。

prisma

migrate

yarn rw prisma migrate dev

このタイミングで自動的にデータもseedされる

seed

yarn rw prisma db seed

scripts/seed.tsをもとにデータを投入する

cell

redwood特有の概念。データフェッチと、その結果に合わせてどう表示するかを宣言的に記述する
rails(MVCアーキテクチャ)におけるコントローラーの役目と同じ。結果に合わせて誰に責務を投げるか決めて、その先はそれぞれに任せる。

画面遷移

routes.home()は遷移をするのではなく、パスを返す（この場合 "/"）。だから以下のような違いがある

const Page = () => {
  return (
    <div>
      <button onClick={routes.home}>動かない</button>
      <Link to={routes.home()}>動く</Link>
    </div>
  );
};

動的に動かしたいなら

<button onClick={() => navigate(routes.home()))>動く</button>

graphQL playgroundでrequireAuthの設定を維持したまま使う方法

すでにログイン済みなら、chromeのdeveloper toolのnetworkタブで、graphqlにPOSTリクエストが確認できるはず。そのヘッダーを一部パクればok

以下のように、playground(http://localhost:8911/graphql)のヘッダー欄に下2つをコピペすればok

users/[id]などのルートでidがほしいとき

  const  { id } = useParams()
  // users/[uid]なら { uid } になる

その他

tailwindを導入する方法

https://mdv.io/tailwindcss-in-redwoodjs

Discussion