usePreloadedQuery

usePreloadedQuery

此 Hook 用於存取先前呼叫 loadQuery 或在 useQueryLoader 的協助下提取的資料。這實現了「邊提取邊渲染」模式

• 呼叫從 useQueryLoader 返回的 loadQuery 回呼。這會在 React 狀態中儲存查詢參考。
  • 您也可以直接呼叫匯入的 loadQuery，這會傳回查詢參考。在這種情況下，將項目儲存在狀態中或 React ref 中，並在您不再使用該值時對該值呼叫 dispose()。
• 然後，在您的 render 方法中，使用 usePreloadedQuery() 來使用查詢參考。如果查詢仍在等待中，則此呼叫會暫停，如果失敗則會拋出錯誤，否則會傳回查詢結果。
• 建議使用此模式而不是 useLazyLoadQuery()，因為它可以允許更早提取資料而不會阻止渲染。

如需更多資訊，請參閱渲染查詢指南。

import type {AppQueryType} from 'AppQueryType.graphql';

const React = require('React');

const {graphql, useQueryLoader, usePreloadedQuery} = require('react-relay');

const AppQuery = graphql`
  query AppQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

type Props = {
  initialQueryRef: PreloadedQuery<AppQueryType>,
};

function NameLoader(props) {
  const [queryReference, loadQuery] = useQueryLoader(
    AppQuery,
    props.initialQueryRef, /* e.g. provided by router */
  );

  return (<>
    <Button
      onClick={() => loadQuery({id: '4'})}
      disabled={queryReference != null}
    >
      Reveal your name!
    </Button>
    <Suspense fallback="Loading...">
      {queryReference != null
        ? <NameDisplay queryReference={queryReference} />
        : null
      }
    </Suspense>
  </>);
}

function NameDisplay({ queryReference }) {
  const data = usePreloadedQuery(AppQuery, queryReference);

  return <h1>{data.user?.name}</h1>;
}

參數

• query：使用 graphql 樣板字面值指定的 GraphQL 查詢。
• preloadedQueryReference：PreloadedQuery 查詢參考，可以從 useQueryLoader 或呼叫 loadQuery() 取得。

傳回值

• data：包含從 Relay 儲存區讀取的資料的物件；該物件符合指定的查詢形狀。
  • 資料的 Flow 類型也會符合此形狀，並包含從 GraphQL Schema 衍生的類型。例如，上述 data 的類型為：{ user: ?{ name: ?string } }。

---

此頁面是否實用？

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