当引入GraphQL时，要了解Fragment。（前端）

首先

我认为使用GraphQL进行前端开发正在变得更加普遍。
能够灵活地从前端获取数据意味着前端现在必须承担起以前由后端担保的部分责任。

需要认真考虑保守性。

所以就是这样子的吗。

这次谈论的是有关Fragment的话题。

“Fragment是什么？”

GraphQL中的片段是为了将复杂的查询整合成小片段而产生的。

这与组件的概念非常相似。我们将它分为小的单元，然后通过组合来构建复杂的应用程序。

就像这个一样。
我们将数据分割成小的碎片，将复杂的查询按角色分割开来。

怎么实现呢？

与调用父组件中的子组件类似，我们可以通过父组件的查询来调用子组件中的片段。

fragment UserFragment on User {
  name
  age
  profile_picture(scale: 2) {
    uri
  }
}

query UserQuery($id: ID!) {
  user(id: $id) {
    id
    name
    ...UserFragment
  }
}

我们将对UserFragment进行通用化，就像这样。 duì UserFragment huà, jiù .)

然而，进行这样的通用化会导致问题的出现。正如大家所知，通用化有时会提高保守性，有时会降低保守性。

如果你过于频繁地进行通用化操作，将会导致”过度获取”的问题。

根据Fragment而产生的过度检索是什么意思?

通过使用碎片，可以将查询的一部分共用化。

在这里发生的是对Fragment的滥用。将获取用户信息的UserDetailFragment也用于用户列表页面。

这种情况就会发生。

所以，诞生了一个叫做“碎片互动”的概念。

Fragment Colocation是什么？

合租（Colocation）是指在同一地点进行管理，有类似的含义。

在中文中，与其一起管理的是组件。

将数据提供给需要数据的组件，将提供所需数据的组件与Fragment一起编写。

这是一个故事。

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 UserDetail(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>
    </>
  );
}

module.exports = UserComponent;

这个概念是通过将组件和片段进行一对一的定义，以防止它们被不必要地共享。

总结

非常感谢您一直阅读到最后。
这次我写了关于GraphQL引入中所需的知识，即Fragment。