usePreloadedQuery

usePreloadedQuery

用于访问由先前调用 loadQuery 或借助 useQueryLoader 获取的数据的钩子。这实现了“边获取边渲染”模式

• 调用从 useQueryLoader 返回的 loadQuery 回调。这将在 React 状态中存储查询引用。
  • 您也可以直接调用导入的 loadQuery，它返回一个查询引用。在这种情况下，将该项目存储在状态或 React 引用中，并在不再使用它时对该值调用 dispose()。
• 然后，在您的渲染方法中，使用 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 架构派生的类型。例如，上面的 data 类型是：{ user: ?{ name: ?string } }。

---

此页面有用吗？

通过 回答几个简短的问题.