useEntryPointLoader

useEntryPointLoader

這個 Hook 用於讓您能夠安全地使用進入點（EntryPoint），同時避免資料洩漏到 Relay 儲存區中。它會在狀態中保留進入點的參考，並在該參考不再可透過狀態存取時將其釋放。

const {useEntryPointLoader, EntryPointContainer} = require('react-relay');

const ComponentEntryPoint = require('Component.entrypoint');

function EntryPointRevealer(): React.MixedElement {
  const environmentProvider = useMyEnvironmentProvider();
  const [
    entryPointReference,
    loadEntryPoint,
    disposeEntryPoint,
  ] = useEntryPointLoader(environmentProvider, ComponentEntryPoint);

  return (
    <>
      {
        entryPointReference == null && (
          <Button onClick={() => loadEntryPoint({})}>
            Click to reveal the contents of the EntryPoint
          </Button>
        )
      }
      {
        entryPointReference != null && (
          <>
            <Button onClick={disposeEntryPoint}>
              Click to hide and dispose the EntryPoint.
            </Button>
            <Suspense fallback="Loading...">
              <EntryPointContainer
                entryPointReference={entryPointReference}
                props={{}}
              />
            </Suspense>
          </>
        )
      }
    </>
  );
}

參數

• environmentProvider：具有 getEnvironment 方法的物件，該方法會傳回 Relay 環境。
• EntryPoint：進入點，通常是透過匯入 .entrypoint.js 檔案取得。

Flow 類型參數

• TEntryPointParams：進入點的 getPreloadProps 方法的第一個參數的類型。
• TPreloadedQueries：傳遞給進入點元件的 queries 屬性的類型。
• TPreloadedEntryPoints：傳遞給進入點元件的 entryPoints 屬性的類型。
• TRuntimeProps：傳遞給 EntryPointContainer 的 props 屬性的類型。此物件也會以 props 形式傳遞給進入點元件。
• TExtraProps：如果進入點的 getPreloadProps 方法傳回具有 extraProps 屬性的物件，則這些額外的屬性將以 extraProps 形式傳遞給進入點元件，並且類型為 TExtraProps。
• TEntryPointComponent：進入點元件的類型。
• TEntryPoint：進入點的類型。

傳回值

包含以下值的元組

• entryPointReference：進入點參考，或 null。
• loadEntryPoint：一個回呼函式，在執行時會載入進入點，並可以 entryPointReference 存取。如果先前已載入進入點，則會將其釋放。如果在 React 的渲染階段呼叫，則可能會擲回錯誤。
  • 參數
    • params: TEntryPointParams：傳遞給進入點的 getPreloadProps 方法的參數。
• disposeEntryPoint：一個回呼函式，在執行時會將 entryPointReference 設定為 null，並對其呼叫 .dispose()。它的類型為 () => void。不應在 React 的渲染階段呼叫。

行為

• 當呼叫 loadEntryPoint 回呼函式時，進入點的每個相關聯查詢（如果有的話）都會載入其查詢資料和查詢 AST。一旦查詢 AST 和資料都可用，就會將資料寫入儲存區。這與 prepareEntryPoint_DEPRECATED 的行為不同，後者僅會在使用 usePreloadedQuery 渲染該查詢時，才將相關查詢的資料寫入儲存區。
• Relay 儲存區會保留進入點參考的相關查詢參考，防止資料被垃圾回收。一旦您對進入點參考呼叫 .dispose()，相關查詢的資料就可能會被垃圾回收。
• 如果在 React 的渲染階段呼叫 loadEntryPoint 回呼函式，則可能會擲回錯誤。

---

此頁面是否實用？

請協助我們透過以下方式讓網站變得更好 回答幾個快速問題.