如何在 remix JS 中有一個請求范圍的變量？

Question

我是重新混合 Js 的新手，想了解完成這項工作的最佳方法。

我有一個調用 function 的應用程序，它又調用 API 來加載用戶詳細信息。 此用戶信息用於繪制多個內容，如 header、頁腳並為用戶加載適當的視圖。

我注意到的是，目前對於來自瀏覽器的單個頁面加載請求，function（以及 API）被呈現 header、頁腳、頁面等的模塊獨立調用多次。我想知道的是如果可以將用戶詳細信息保存在變量中，以便對於單個請求，所有模塊都可以使用此變量，並且每個瀏覽器請求只需要獲取一次。

我嘗試了以下但沒有用

let userDetails;

export function getUserDetails(userId){

  if(!userDetails){ 
     console.log("Calling API to fetch user details);
     //call the API
     userDetails = async getUserById(userId);
  }
  return userDetails;
}

我們有一個選擇是將用戶詳細信息保存在瀏覽器/會話中，但由於某些政策不允許這樣做。 實現此目的的最佳方法是什么，以便我們只需要在瀏覽器的每個請求中調用一次 API 並保存后續調用以加載單個頁面以獲取相同的信息？

TLDR：在混音服務器模塊中初始化 object 的最佳方法是什么，以便其他模塊可以訪問它的值，並且每個瀏覽器請求只需設置一次。

Answer 1

Dataloader可以用來解決這個問題。

它提供請求級緩存（和批處理），這意味着初始 HTML 請求的並行加載器可以在保持獨立的同時進行協作。

可以在此處找到使用 remix 的示例。

// Root.tsx
export const loader = async ({ context }) => {
  const user = await context.loaders.userById.get("user_1");
  return json({ user });
}

// ...

// Child.tsx
export const loader = async ({ context }) => {
  // This will await the same promise created in the Root.tsx loader
  const user = await context.loaders.userById.get("user_1");
  return json({ user });
}

// ...

話雖如此，我要警告數據加載器的抽象成本非常高，並且只有在您真的負擔不起多次調用 API 時才使用它（加載器並行運行，因此它更多的是上游負載而不是性能的問題).

還值得注意的是，SPA 導航不會看到好處，因為每個加載程序都作為來自瀏覽器的單獨請求被調用，因此請求級緩存將無效。