Relay本地状态管理：客户端布尔标志的添加与响应式更新

你的思路完全正确——用Relay的本地状态管理实现这个布尔标志，完全不需要引入Redux或Mobx。问题主要出在两个关键点：一是Relay的GraphQL schema里未定义这个客户端专属字段，二是查询时没有明确标记它为本地字段。下面一步步帮你解决：

1. 定义客户端Schema扩展 #

Relay编译器需要识别这个字段属于Query类型且是本地的。创建一个客户端GraphQL文件（比如client-schema.graphql），添加以下内容：

extend type Query {
  isModalOpened: Boolean! @client
}

@client指令是核心，它告诉Relay这个字段只存在于客户端，不会触发任何服务器请求。把这个文件加入Relay的编译目录后，编译器就不会再抛出Unknown field 'isModalOpened' on type 'Query'的错误了。

2. 优化本地状态的初始化与更新 #

你之前用commitLocalUpdate的方向没问题，可以简化代码，直接操作Query根对象：

class ModalComponent extends PureComponent {
  componentDidMount() {
    commitLocalUpdate(environment, (store) => {
      // 获取Query根节点
      const queryRoot = store.getRoot();
      // 设置模态框为打开状态
      queryRoot.setValue(true, 'isModalOpened');
    });
  }

  componentWillUnmount() {
    commitLocalUpdate(environment, (store) => {
      const queryRoot = store.getRoot();
      // 设置模态框为关闭状态
      queryRoot.setValue(false, 'isModalOpened');
    });
  }

  render() {
    return ReactDOM.createPortal(
      <div className={styles.modalContainer}>dummy modal</div>,
      document.getElementById('modal'),
    );
  }
}

另外建议在Relay环境初始化时就设置字段默认值，避免其他组件读取到undefined：

// 初始化Relay Environment的代码
const environment = new Environment({
  network: Network.create(fetchQuery), // 你的网络层配置
  store: new Store(new RecordSource()),
});

// 初始状态设为关闭
commitLocalUpdate(environment, (store) => {
  const queryRoot = store.getRoot();
  queryRoot.setValue(false, 'isModalOpened');
});

3. 在其他组件中查询本地字段并实现响应式更新 #

修改MyComponent，给查询中的isModalOpened加上@client指令，这样Relay就会从本地store读取数据，不会发起服务器请求：

用QueryRenderer的版本： #

const MyComponent = (props) => {
  return (
    <QueryRenderer
      environment={environment}
      query={graphql`
        query MyComponentQuery {
          isModalOpened @client
        }
      `}
      render={({ error, props: data }) => {
        if (error) return <div>Error: {error.message}</div>;
        // 因为我们初始化了默认值，data不会是undefined
        return <div>Modal status: {data.isModalOpened ? 'Open' : 'Closed'}</div>;
      }}
    />
  );
};

用Relay Hooks的版本（更简洁）： #

import { useQuery } from 'react-relay';

// 定义查询
const MyComponentQuery = graphql`
  query MyComponentQuery {
    isModalOpened @client
  }
`;

const MyComponent = () => {
  const { data, error } = useQuery(MyComponentQuery, {});
  
  if (error) return <div>Error: {error.message}</div>;
  
  return <div>Modal status: {data.isModalOpened ? 'Open' : 'Closed'}</div>;
};

核心原理 #

当你调用commitLocalUpdate修改isModalOpened的值时，Relay的本地store会自动更新，并且通知所有订阅了该字段的组件重新渲染——这就是你需要的响应式更新。整个流程完全基于Relay的原生本地状态机制，不需要额外引入状态管理库。

内容的提问来源于stack exchange，提问作者Arseniy-II