如何不违反React规则将Apollo查询动态数据存入state

• 违反React Hooks的基本调用规则：所有Hook必须在组件函数顶层调用，不能出现在条件分支、提前return语句之后。当前代码在loading、error状态下提前返回组件，这两类渲染场景下不会执行后续的useEffect，等请求完成不再触发提前return时，本轮渲染调用的Hook数量和之前不一致，直接抛出规则错误。
• 状态同步逻辑存在缺陷：就算调整Hook位置，空依赖数组的useEffect只会在组件首次挂载时执行一次，此时Apollo请求尚未返回，data值为undefined，后续请求完成数据更新时effect不会重新触发，无法拿到正确值；如果直接将data.information加入依赖又不做判空处理，很容易触发非必要更新甚至渲染死循环。

所有Hook统一挪到组件最顶层，所有条件判断、提前返回逻辑放在Hook调用之后，effect内部增加判空逻辑，正确声明依赖项：

type ComponentProps = {
  id: number;
}

// 实际项目替换为information字段对应的真实类型
type InformationItem = unknown;

const Component = ({ id }: ComponentProps) => {
  // ------------- 所有Hook放在最顶层，不要插入条件判断 -------------
  const { data, loading, error } = useDataAboutThing({
    variables: {
       id: id,
    },
  });
  const [event, setEvent] = React.useState<InformationItem[]>([]);

  React.useEffect(() => {
    // 仅在请求完成、无报错、目标字段存在时执行状态更新
    if (!loading && !error && data?.information) {
      setEvent(data.information);
    }
  // setEvent是React官方保证的稳定引用，不会触发重复执行
  }, [loading, error, data, setEvent]);
  // ------------- Hook调用结束，再写分支返回逻辑 -------------

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;

  return (
    // 业务渲染逻辑
    <div>{/* 渲染event相关内容 */}</div>
  );
};

如果event状态仅用于存储Apollo请求返回的information字段，不存在后续手动修改该状态的需求，完全不需要额外维护一份state，直接派生取值即可，从根源避免状态同步带来的各种问题：

const Component = ({ id }: ComponentProps) => {
  const { data, loading, error } = useDataAboutThing({
    variables: { id },
  });
  // 直接派生值，不需要useState+useEffect做同步
  const event = data?.information ?? [];

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;

  return <div>{/* 业务渲染 */}</div>;
};

如果确实需要在请求完成时触发状态更新，也可以直接使用Apollo useQuery自带的onCompleted配置项，无需手动写effect监听：

const { data, loading, error } = useDataAboutThing({
  variables: { id },
  onCompleted: (res) => {
    if (res?.information) setEvent(res.information);
  }
});

内容的提问来源于stack exchange，提问作者atotalpirate