實戰範例 011：用 v1.6.1 導覽圖譜追蹤「這個按鈕點了會去哪」 · Codegraph

這個範例要解決的問題

你接手一個 Next.js 電商專案。PM 問你：「使用者按下『加入購物車』後，資料到底流到哪裡去了？」

在 v1.6.0 之前，這個問題要拆成好幾步：grep 找按鈕元件 → 讀元件找 fetch → grep 找 API route → 讀 route 找 handler。而且如果專案有多個 app（monorepo），你可能還會追到別的 app 的 route。

v1.6.1 之後，這整條鏈路已經在圖譜裡了。

第一步：確認索引已更新

codegraph status

如果 status 提醒你尚未重新索引，先執行：

codegraph index

第二步：一次問出完整鏈路

codegraph_explore "AddToCartButton fetch /api/cart"

以下為鏈路示意，並非實測的逐字輸出；實際內容取決於你專案的程式碼與索引：

  AddToCartButton (components/AddToCartButton.tsx)
    ↓ calls (when !isLoading)
      handleAddToCart()
        ↓ fetch POST /api/cart
          → app/api/cart/route.ts  (POST handler)
              ↓ calls
                addItemToCart()
                  ↓ calls
                    db.cart.upsert()

三個 v1.6.1 才有的關鍵資訊：

→ app/api/cart/route.ts：這是 navigates/serve 邊——前端 fetch 直接連到服務它的 route。v1.6.0 之前這裡是死路（只是一個字串）。
↓ calls (when !isLoading)：Flow 標示了呼叫條件。這告訴你「只有在不載入中時才會送出」——這是 v1.6.1 新增的。
POST handler：route 綁定到它 export 的函式，不是一個孤立的檔案。

第三步：用呼叫條件判斷真實路徑

假設你看到這樣的 Flow：

  handleAddToCart()
    ↓ calls (when !isLoading)
      submitCart()
    ↓ calls (when isGuest)
      redirectToLogin()
    ↓ calls (when !isGuest)
      submitCart()

隨堂測驗

根據上面的 Flow，一位已登入（非 guest）且頁面已載入完成的使用者按下按鈕，會執行哪些呼叫？

💡 想先看個提示？

逐一檢查每個呼叫的條件對這位使用者是否成立。

第四步：跨層追蹤佇列與事件

如果你的購物車是非同步處理（例如用 BullMQ），v1.6.1 也能追：

codegraph_explore "cartQueue add processCart"

  addItemToCart()
    ↓ queue.add('cart:sync')
      → CartProcessor.processCart()   (BullMQ @Process)
          ↓ calls
            syncCartToWarehouse()

同樣地，NestJS 的 EventEmitter2、socket 的 @SubscribeMessage、Next.js 的 server action 都有對應的合成跳。

第五步：驗證「誰呼叫這個 endpoint」

反過來問也一樣：

codegraph_explore "app/api/cart/route.ts POST"

會列出所有呼叫這個 endpoint 的前端位置——包含 axios.create({ baseURL }) 實例發出的請求。

常見誤區

誤區	事實
「升級後就自動有導覽邊」	必須重新索引，邊是索引時寫入的
「動態路徑也會有邊」	只有字面路徑或事件名稱才配對，`fetch(variable)` 保守留空
「Flow 條件是執行結果」	條件是呼叫前提，不是結果
「所有同名 route 都會連」	route 表按 app 建立，不會跨 app 誤連

動手練習

在你的專案中找一個前端 fetch 呼叫，用 codegraph_explore 追到它的 route
找一個有 if 分支的呼叫點，觀察 Flow 如何標示條件
反過來從一個 API route 出發，列出所有呼叫端

這個範例要解決的問題

第一步：確認索引已更新

第二步：一次問出完整鏈路

第三步：用呼叫條件判斷真實路徑

第四步：跨層追蹤佇列與事件

第五步：驗證「誰呼叫這個 endpoint」

常見誤區

動手練習

延伸閱讀