search

r-sugi / nextjs-tdd-template

https://nextjs-tdd-templatestorybook-rsugis-projects.vercel.app
0 stars 0 forks source link

fix: 疎通 functions呼び出し時にエラーになっているっぽい #204

Closed r-sugi closed 2 months ago

r-sugi commented 2 months ago

User description

202

PR Type

bug_fix

Description

Changes walkthrough 📝

Relevant files
Bug fix
index.ts
`fetch`関数のURL修正とコード整形                                                                       
functions/src/index.ts
  • 修正: fetch関数のURLをhttp://localhostからhttp://host.docker.internalに変更。
  • fetch関数の呼び出し方法を改行して整理。
    		•  +9/-6     

    💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

    vercel[bot] commented 2 months ago

    The latest updates on your projects. Learn more about Vercel for Git ↗︎

    Name Status Preview Comments Updated (UTC)
    nextjs-tdd-template_storybook 🔄 Building (Inspect) Visit Preview 💬 Add feedback Sep 14, 2024 11:14pm
    github-actions[bot] commented 2 months ago

    PR Reviewer Guide 🔍

    ⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
    🧪 No relevant tests
    🔒 Security concerns

    Sensitive information exposure:
    ハードコードされた`"x-hasura-admin-secret"`がセキュリティリスクを引き起こす可能性があります。この秘密情報は環境変数や安全なストレージから取得するべきです。
    ⚡ Key issues to review

    Hardcoded Secret
    ハードコードされた`"x-hasura-admin-secret"`が環境変数に置き換えられるべきです。セキュリティリスクを減らすために、秘密情報はソースコードに直接書かれるべきではありません。
    github-actions[bot] commented 2 months ago

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Score
    Best practice
    環境変数を使用して、コードの柔軟性を向上させます。 ___ **`fetch`関数のURLをハードコードするのではなく、環境変数を使用してください。これにより、異なる環境でのアプリケーションの柔軟性が向上します。** [functions/src/index.ts [53-61]](https://github.com/r-sugi/nextjs-tdd-template/pull/204/files#diff-e6a35fcf3c90f75b27c14eb559ddcf8cd259b4e1a2cf49f73d3ed9f91229fccdR53-R61) ```diff const res = await fetch( - "http://host.docker.internal:8080/v1/graphql", + process.env.GRAPHQL_ENDPOINT, { method: "post", body: JSON.stringify(queryStr), headers: { - "x-hasura-admin-secret": "xxxxxx", // TODO: 環境変数にする + "x-hasura-admin-secret": process.env.HASURA_ADMIN_SECRET, }, }, ); ```
    Suggestion importance[1-10]: 9 Why: Using environment variables instead of hardcoding URLs and secrets is a best practice that enhances code flexibility and security, especially when deploying across different environments.
    		9
    Enhancement
    リクエストヘッダーにContent-Typeを追加して、サーバーがリクエストを正しく解釈できるようにします。 ___ **fetch関数のヘッダーに'Content-Type':
    'application/json'    を追加してください。これにより、サーバーがリクエストのボディを正しく解釈できるようになります。** [functions/src/index.ts [59-60]](https://github.com/r-sugi/nextjs-tdd-template/pull/204/files#diff-e6a35fcf3c90f75b27c14eb559ddcf8cd259b4e1a2cf49f73d3ed9f91229fccdR59-R60) ```diff headers: { "x-hasura-admin-secret": "xxxxxx", // TODO: 環境変数にする + "Content-Type": "application/json" }, ```
    Suggestion importance[1-10]: 8 Why: Adding the `Content-Type` header ensures that the server correctly interprets the request body as JSON, which is crucial for proper API communication.
    		8
    Error handling
    JSON.stringifyの使用時にエラーハンドリングを追加します。 ___ **
    JSON文字列を生成する際にJSON.stringifyを使用する場合、適切なエラーハンドリングを追加してください。例えば、循環参照があるオブジェクトを扱う場合にエラーが発生する可能性があります。** [functions/src/index.ts [57]](https://github.com/r-sugi/nextjs-tdd-template/pull/204/files#diff-e6a35fcf3c90f75b27c14eb559ddcf8cd259b4e1a2cf49f73d3ed9f91229fccdR57-R57) ```diff -body: JSON.stringify(queryStr), +let requestBody; +try { + requestBody = JSON.stringify(queryStr); +} catch (error) { + console.error('JSON stringify error:', error); + return; +} +const res = await fetch( + "http://host.docker.internal:8080/v1/graphql", + { + method: "post", + body: requestBody, + headers: { + "x-hasura-admin-secret": "xxxxxx", // TODO: 環境変数にする + }, + }, +); ```
    Suggestion importance[1-10]: 7 Why: Adding error handling for `JSON.stringify` is a good practice to prevent runtime errors due to circular references or other issues, improving code robustness.
    		7
    try-catchブロックを使用してエラーハンドリングを強化します。 ___ **
    fetch関数のエラーハンドリングを改善するために、try-catchブロックを使用して非同期呼び出しを囲んでください。これにより、ネットワークエラーやその他の例外を適切に処理できるようになります。** [functions/src/index.ts [53-61]](https://github.com/r-sugi/nextjs-tdd-template/pull/204/files#diff-e6a35fcf3c90f75b27c14eb559ddcf8cd259b4e1a2cf49f73d3ed9f91229fccdR53-R61) ```diff -const res = await fetch( - "http://host.docker.internal:8080/v1/graphql", - { - method: "post", - body: JSON.stringify(queryStr), - headers: { - "x-hasura-admin-secret": "xxxxxx", // TODO: 環境変数にする +let res; +try { + res = await fetch( + "http://host.docker.internal:8080/v1/graphql", + { + method: "post", + body: JSON.stringify(queryStr), + headers: { + "x-hasura-admin-secret": "xxxxxx", // TODO: 環境変数にする + }, }, - }, -); + ); +} catch (error) { + console.error('Fetch error:', error); + return; +} ```
    Suggestion importance[1-10]: 6 Why: The suggestion to add a `try-catch` block for the fetch call is redundant since the existing code already uses a try-catch block. However, it could improve clarity by explicitly handling fetch errors separately.
    		6
    github-actions[bot] commented 2 months ago

    Preview APP: 'https://nextjs-tdd-template-7a5p2sr38-rsugis-projects.vercel.app'