NextJS 11搭配Relay v6升级后出现RelayContext格式错误如何解决？

Relay v6对RelayContext的接口定义做了不兼容更新，旧版本的Context仅要求传入environment属性，v6要求Context值必须同时包含以下两个必填属性：

• environment: Relay 环境实例
• variables: 全局公共查询变量，无特殊需求可传空对象{}

你当前代码直接给ReactRelayContext.Provider传递仅包含environment的对象，不符合v6的接口要求，因此触发类型校验报错。
另外还有一个常见的触发场景：项目依赖中存在多个版本的react-relay，不同版本导出的RelayContext是不同实例，也会导致校验不通过。

方案1：修正Context Provider的传值（适配v6接口） #

直接修改高阶组件的render方法，补全Context所需的variables属性即可：

render() {
    return (
        <ReactRelayContext.Provider value={{ 
            environment: this.environment,
            variables: {} // 新增这一行，有全局公共变量可替换为实际值
        }}>
            <ComposedComponent {...(this.props as P)} />
        </ReactRelayContext.Provider>
    )
}

如果你的子组件没有依赖旧版Relay HOC传入的relay属性，可以去掉冗余的{...{relay}}传值，避免属性冲突

方案2：使用官方封装的Provider组件（更稳妥） #

Relay v6官方导出了RelayEnvironmentProvider组件，自动处理Context的接口适配，不需要手动拼接value值：

1. 先从react-relay导入Provider

import { RelayEnvironmentProvider } from 'react-relay';

2. 替换render方法里的Context Provider

render() {
    return (
        <RelayEnvironmentProvider environment={this.environment}>
            <ComposedComponent {...(this.props as P)} />
        </RelayEnvironmentProvider>
    )
}

额外校验 #

修改后如果还是报错，执行以下命令检查依赖版本：

npm ls react-relay
# 用yarn的话执行 yarn list react-relay

如果输出中存在多个版本的react-relay，删除node_modules和lock文件（package-lock.json/yarn.lock）后重新安装依赖即可。

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