rsnext/examples/with-relay-modern-server-express/lib/withData.js

56 lines
1.6 KiB
JavaScript
Raw Normal View History

import React from 'react'
import initEnvironment from './createRelayEnvironment'
import { fetchQuery, ReactRelayContext } from 'react-relay'
export default (ComposedComponent, options = {}) => {
return class WithData extends React.Component {
static displayName = `WithData(${ComposedComponent.displayName})`
static async getInitialProps (ctx) {
// Evaluate the composed component's getInitialProps()
let composedInitialProps = {}
if (ComposedComponent.getInitialProps) {
composedInitialProps = await ComposedComponent.getInitialProps(ctx)
}
let queryProps = {}
let queryRecords = {}
const environment = initEnvironment()
if (options.query) {
const variables = composedInitialProps.relayVariables || {}
// TODO: Consider RelayQueryResponseCache
// https://github.com/facebook/relay/issues/1687#issuecomment-302931855
queryProps = await fetchQuery(environment, options.query, variables)
queryRecords = environment
.getStore()
.getSource()
.toJSON()
}
return {
...composedInitialProps,
...queryProps,
queryRecords
}
}
constructor (props) {
super(props)
this.environment = initEnvironment({
records: props.queryRecords
})
}
render () {
return (
<ReactRelayContext.Provider
value={{ environment: this.environment, variables: {} }}
>
<ComposedComponent {...this.props} />
</ReactRelayContext.Provider>
)
}
}
}