使用 NextJS 反应中继：RelayContext：预期 `context.relay` 是一个符合 `RelayContext` 接口的对象，得到了 `[object Object]`

Question

我已经像这样设置了我的中继环境：

// createRelayEnvironment.ts

let relayEnvironment

export default function initEnvironment({ records }: EnvProps) {
    // Create a network layer from the fetch function
    const network = Network.create(fetchQuery)

    const store = new Store(new RecordSource(records || {}))

    // Make sure to create a new Relay environment for every server-side request so that data
    // isn't shared between connections
    if (!(process as any).browser) {
        return new Environment({
            network,
            store
        })
    }

    // reuse Relay environment on client-side
    if (!relayEnvironment) {
        relayEnvironment = new Environment({
            network,
            store
        })
    }

    return relayEnvironment
}

并获取数据：

class WithData extends React.Component {
        environment: Environment

        constructor(props: any) {
            super(props)
            this.environment = initEnvironment({
                records: props.queryRecords
            })
        }


        static async getInitialProps(ctx) {
            let composedInitialProps = {}
            if (ComposedComponent.getInitialProps) {
                composedInitialProps = await ComposedComponent.getInitialProps(ctx)
            }

            let queryProps = {}
            let queryRecords = {}

            const environment = initEnvironment({ records: {} })

            if (options.query) {
                const variables = options.mapProps ? options.mapProps() : {}
here
                queryProps = await fetchQuery(environment, options.query, variables)

                queryRecords = environment.getStore().getSource().toJSON()
            }

            return {
                ...ctx.query, // query info from next-router. E.g "slug"
                ...composedInitialProps,
                ...queryProps,
                queryRecords
            }
        }

        render() {
            const relay = {
                environment: this.environment
            }

            return (
                <ReactRelayContext.Provider value={{ environment: this.environment }}>
                    <ComposedComponent {...(this.props as P)} {...{ relay }} />
                </ReactRelayContext.Provider>
            )
        }
    }
}

我收到以下错误：

Invariant Violation: RelayContext: Expected `context.relay` to be an object conforming to the `RelayContext` interface, got `[object Object]`.

NextJS 11 和 Relay v6.0.0 正在发生这种情况。 它在 v5.0.0 上运行良好。 这些是很旧的版本，但我正在尝试升级。

从查看源代码来看，这表明 Relay 环境的格式不正确，但我不明白这是怎么回事，因为我只是按照文档的初始化说明进行操作

有什么简单的我做错了吗？

Answer 1

我最终弄清楚是什么导致了这种情况。 失败的检查是中继源代码中的这一行。

当我为变量添加一个空对象时，如下所示：

render() {
            const relay = {
                environment: this.environment
            }

            return (
                <ReactRelayContext.Provider value={{ environment: this.environment, variables: {}}>
                    <ComposedComponent {...(this.props as P)} {...{ relay }} />
                </ReactRelayContext.Provider>
            )
        }

有效。

缺点是现在无法通过打字稿检查。 但是我注意到在 v7 中，源代码中的验证现在已经消失了。 所以对我来说，解决方案是升级到 v7 并删除变量。