[英]React relay with NextJS: RelayContext: Expected `context.relay` to be an object conforming to the `RelayContext` interface, got `[object Object]`
I have setup my Relay environment like this:我已经像这样设置了我的中继环境:
// 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
}
and to fetch data:并获取数据:
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>
)
}
}
}
I'm getting the following error:我收到以下错误:
Invariant Violation: RelayContext: Expected `context.relay` to be an object conforming to the `RelayContext` interface, got `[object Object]`.
This is happening with NextJS 11 and Relay v6.0.0. NextJS 11 和 Relay v6.0.0 正在发生这种情况。 It was working fine on v5.0.0.
它在 v5.0.0 上运行良好。 These are quite old versions but I'm trying to upgrade.
这些是很旧的版本,但我正在尝试升级。
From looking at the source code , this suggests the Relay environment is not the right format, but I don't see how this can be the case since I'm just following the doc's initialisation instructions从查看源代码来看,这表明 Relay 环境的格式不正确,但我不明白这是怎么回事,因为我只是按照文档的初始化说明进行操作
Is there something simple I'm doing wrong?有什么简单的我做错了吗?
I eventually worked out what was causing this.我最终弄清楚是什么导致了这种情况。 The check that was failing was this line in the Relay source code.
失败的检查是中继源代码中的这一行。
When I added an empty object for variables, like this:当我为变量添加一个空对象时,如下所示:
render() {
const relay = {
environment: this.environment
}
return (
<ReactRelayContext.Provider value={{ environment: this.environment, variables: {}}>
<ComposedComponent {...(this.props as P)} {...{ relay }} />
</ReactRelayContext.Provider>
)
}
it worked.有效。
The downside is this now fails typescript checks.缺点是现在无法通过打字稿检查。 But I notice that in v7, the validation in the source code has now gone.
但是我注意到在 v7 中,源代码中的验证现在已经消失了。 So for me the solution has been to upgrade to v7 and remove the variables.
所以对我来说,解决方案是升级到 v7 并删除变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.