Zenn
Closed33

redwoodjs の チュートリアルを流す 1~4章まで

React
RedwoodJS
GitHub Codespaces
tkttkt
  • 環境
    • github codespaces
    • local vscode
    • docker-compose
tkttkt
root@2443787b1579:/app# yarn rw g scaffold postt
"postt" model not found, check if it exists in "./api/db/schema.prisma"

存在しない model で scaffold しようとすると怒ってくれるみたい

tkttkt

app_1  | api | Loading server config from /app/api/server.config.js 
app_1  | api | 
app_1  | api | Importing Server Functions... 
app_1  | api | /graphql 204 ms
app_1  | api | ...Done importing in 205 ms
app_1  | api | Took 312 ms
app_1  | api | API listening on http://localhost:8911/
app_1  | api | GraphQL endpoint at /graphql
app_1  | api | 17:35:04 🌲 Server listening at http://[::]:8911
app_1  | web | assets by status 12.5 KiB [cached] 6 assets
app_1  | web | assets by status 4.58 MiB [emitted]
app_1  | web |   assets by path static/js/*.js 4.51 MiB
app_1  | web |     asset static/js/app.bundle.js 2.89 MiB [emitted] (name: app) 1 related asset
app_1  | web |     asset static/js/src_pages_Post_PostsPage_PostsPage_tsx.chunk.js 467 KiB [emitted] 1 related asset
app_1  | web |     asset static/js/src_pages_Post_PostPage_PostPage_tsx.chunk.js 466 KiB [emitted] 1 related asset
app_1  | web |     asset static/js/src_pages_Post_EditPostPage_EditPostPage_tsx.chunk.js 338 KiB [emitted] 1 related asset
app_1  | web |     asset static/js/src_pages_Post_NewPostPage_NewPostPage_tsx.chunk.js 336 KiB [emitted] 1 related asset
app_1  | web |     asset static/js/runtime-app.bundle.js 51 KiB [emitted] (name: runtime-app) 1 related asset
app_1  | web |   assets by info 75.3 KiB [immutable]
app_1  | web |     asset app.44cf1eb062e4ab28dbb4.hot-update.js 74.9 KiB [emitted] [immutable] [hmr] (name: app) 1 related asset
app_1  | web |     asset runtime-app.44cf1eb062e4ab28dbb4.hot-update.js 381 bytes [emitted] [immutable] [hmr] (name: runtime-app) 1 related asset
app_1  | web |     asset runtime-app.44cf1eb062e4ab28dbb4.hot-update.json 41 bytes [emitted] [immutable] [hmr]
app_1  | web |   asset index.html 483 bytes [emitted]
app_1  | web | Entrypoint app 3.01 MiB (2.88 MiB) = static/js/runtime-app.bundle.js 51 KiB runtime-app.44cf1eb062e4ab28dbb4.hot-update.js 381 bytes static/js/app.bundle.js 2.89 MiB app.44cf1eb062e4ab28dbb4.hot-update.js 74.9 KiB 4 auxiliary assets
app_1  | web | cached modules 2.68 MiB [cached] 851 modules
app_1  | web | runtime modules 34.3 KiB 19 modules
app_1  | web | javascript modules 550 KiB
app_1  | web |   modules by path ../node_modules/core-js/internals/*.js 92.4 KiB 131 modules
app_1  | web |   modules by path ../node_modules/core-js/modules/*.js 35.5 KiB 23 modules
app_1  | web |   modules by path ./src/ 65.5 KiB 16 modules
app_1  | web |   modules by path ../node_modules/xregexp/lib/ 218 KiB 9 modules
app_1  | web |   modules by path ../node_modules/@redwoodjs/ 29.5 KiB
app_1  | web |     modules by path ../node_modules/@redwoodjs/web/ 1.18 KiB 2 modules
app_1  | web |     modules by path ../node_modules/@redwoodjs/forms/dist/*.js 28.4 KiB 2 modules
app_1  | web |   modules by path ../node_modules/humanize-string/ 1.2 KiB
app_1  | web |     ../node_modules/humanize-string/index.js 484 bytes [built] [code generated]
app_1  | web |     ../node_modules/humanize-string/node_modules/decamelize/index.js 740 bytes [built] [code generated]
app_1  | web |   + 4 modules
app_1  | web | webpack 5.73.0 compiled successfully in 6272 ms
app_1  | web | <e> [webpack-dev-server] [HPM] Error occurred while proxying request 127.0.0.1:8910/graphql to http://[::1]:8911/ [EADDRNOTAVAIL] (https://nodejs.org/api/errors.html#errors_common_system_errors)
app_1  | web | <e> [webpack-dev-server] [HPM] Error occurred while proxying request 127.0.0.1:8910/graphql to http://[::1]:8911/ [EADDRNOTAVAIL] (https://nodejs.org/api/errors.html#errors_common_system_errors)

お？

tkttkt

local の node で試してみる

tkttkt
web | <e> [webpack-dev-server] [HPM] Error occurred while proxying request 0.0.0.0:8910/graphql to http://[::1]:8911/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
tkttkt

EADDRNOTAVAIL だったところで ECONNREFUSED が出るようになった

tkttkt
[api]
  port = 8911
  host = "0.0.0.0"

してから reload してもだめっぽい

tkttkt

api | 21:26:19 🌲 incoming request POST xxx /graphql
api | 21:26:19 🐛 Parsing request to extract GraphQL parameters
api | 21:26:19 🐛 Processing GraphQL Parameters
api | 21:26:19 🐛 Execution start
api | 21:26:19 🐛 
api | Received GraphQL operation:
api | 
api | 21:26:19 🐛        operationName:
api | 21:26:19 🐛        variables:
api | 21:26:19 🐛 graphql-server GraphQL execution started: FindPosts
api | 21:26:19 🐛 Execution end
api | 21:26:19 🐛        result:
api | 21:26:19 🚨 graphql-server Cannot read properties of undefined (reading 'findMany') 
api | 
api | 🚨 GraphQLError Info
api | 
api | {
api |   "path": [
api |     "posts"
api |   ],
api |   "locations": [
api |     {
api |       "line": 2,
api |       "column": 3
api |     }
api |   ],
api |   "extensions": {}
api | }
api |  
api | 🥞 Error Stack
api | 
api | /home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/api/src/services/posts/posts.ts:6
api |   return db.post.findMany()
api |                  ^
api | 
api | TypeError: Cannot read properties of undefined (reading 'findMany')
api |     at Object.posts (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/api/src/services/posts/posts.ts:6:18)
api |     at Object.posts (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/@redwoodjs/graphql-server/dist/makeMergedSchema/makeMergedSchema.js:57:62)
api |     at useRedwoodDirectiveValidatorResolver (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/@redwoodjs/graphql-server/dist/plugins/useRedwoodDirective.js:96:22)
api |     at executeField (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/graphql/execution/execute.js:481:20)
api |     at executeFields (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/graphql/execution/execute.js:413:20)
api |     at executeOperation (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/graphql/execution/execute.js:344:14)
api |     at execute (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/graphql/execution/execute.js:136:20)
api |     at /home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/@envelop/core/cjs/orchestrator.js:379:33
api |     at processTicksAndRejections (node:internal/process/task_queues:96:5)
api |     at async processRequest (/home/tkt/src/github.com/tktcorporation/redwoodjs-sandbox/redwoodblog/node_modules/@graphql-yoga/common/index.js:194:20)

別のエラーが出始めた

tkttkt

アプリケーションのエラーっぽいからまだ舞えそう

tkttkt
yarn rw migrate reset

してから

yarn rw dev

したらいけたっぽい
RWJS_DEV_API_URL=“http://localhost” しなくてもいけたのは、さっきのが生きてるのかな

tkttkt


https://redwoodjs.com/docs/tutorial/chapter3/forms#introducing-form-helpers
contactPage 作っていれたけど、Layout が適用されてない、なんでだろうか

tkttkt

home, about, articles ではちゃんと出てる
同じ扱いのはずだけど…

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

docker-compose down, docker-compose up しても変わらない
なんでだ？

tkttkt
const Routes = () => {
  return (
    <Router>
      <Route path="/contact" page={ContactPage} name="contact" />
      <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" />
      </Set>
      <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>
  )
}

Router の一番上にいた。そっちが有効になってたみたい

tkttkt


クラス名で色々制御できるの面白い
tailwind と相性が良かったりする？

tkttkt


コンポーネント毎にフォントが変わってるのが地味に気になる

tkttkt


railway で postgresql を作ろうとしたら、謎のエラーで作成できない
signup 直前に、アカウントなしで db 作成したからかな…

別session でやっても作成できない…

tkttkt

アカウントなし状態でプロジェクト作成して、そのあと Claim Project みたいなのを選んでアカウントに紐づけたら作れた

tkttkt


デフォルトのままって書いてるけどこれでホンマにええんかね

tkttkt

開発環境も codespaces で大丈夫だったしよきよき

このスクラップは2022/07/25にクローズされました