useFragment

useFragment

import type {UserComponent_user$key} from 'UserComponent_user.graphql';

const React = require('React');

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

type Props = {
  user: UserComponent_user$key,
};

function UserComponent(props: Props) {
  const data = useFragment(
    graphql`
      fragment UserComponent_user on User {
        name
        profile_picture(scale: 2) {
          uri
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>{data.name}</h1>
      <div>
        <img src={data.profile_picture?.uri} />
      </div>
    </>
  );
}

参数

• fragment: 使用 graphql 模板字面量指定的 GraphQL 片段。
• fragmentReference: *片段引用* 是一个不透明的 Relay 对象，Relay 用它从存储中读取片段的数据；更具体地说，它包含有关应从哪个特定对象实例读取数据的信息。
  • 片段引用类型可以从生成的 Flow 类型中导入，从文件 <fragment_name>.graphql.js 中导入，并且可以用来声明 Props 的类型。片段引用类型的名称将是: <fragment_name>$key。我们使用我们的 lint 规则 来强制执行片段引用道具类型是否正确声明。

返回值

• data: 包含从 Relay 存储中读取的数据的对象；该对象与指定的片段形状匹配。
  • 数据的 Flow 类型也将与该形状匹配，并包含从 GraphQL Schema 派生的类型。例如，上面的 data 类型是: { name: ?string, profile_picture: ?{ uri: ?string } }。

行为

• 该组件会自动订阅到片段数据的更新: 如果该特定 User 的数据在应用程序的任何地方被更新（例如，通过获取新数据或修改现有数据），该组件将自动重新渲染，并使用最新的更新数据。
• 如果该特定片段的任何数据丢失，并且数据当前正在由父查询获取，则该组件将挂起。
  • 有关 Suspense 的更多详细信息，请参阅我们的 使用 Suspense 加载状态 指南。

---

此页面是否有用？

通过以下方式帮助我们使网站变得更好 回答几个简单的问题.