Same as Relay Modern's QueryRenderer, but will check the store for data before fetching.
Taken from react-relay QueryRenderer with two additions.
- lookup prop will check the relay store for data first and if present will immediately call
render
with props. - retain prop will prevent the component from garbage collecting when unmounted.
This will not be necessary if this PR is merged: facebook/relay#1760
yarn add relay-query-lookup-renderer
import QueryLookupRenderer from 'relay-query-lookup-renderer';
<QueryLookupRenderer
lookup
query={query}
environment={environment}
variables={variables}
render={(props, error) => {
if (error) {
return <div>Error</div>
} else if (props) {
return <MyComponent {...props} />
}
return <div>Loading</div>
}}
/>
All props are the same as the QueryRenderer included in relay except for
lookup
If true, check the relay store for data first. If false or null, you will get the same behavior of the standardQueryRenderer
.
This component is useful for isomorphic/universal/server side rendered relay apps. It will immediately render data from the store if it is there.
See the full example here: https://github.com/robrichard/relay-modern-isomorphic-example
Server
import query from './myQuery';
import {
createOperationSelector,
getOperation,
Environment,
RecordSource,
Store,
} from 'relay-runtime';
import {renderToString} from 'react-dom/server';
import QueryLookupRenderer from 'relay-query-lookup-renderer';
// assume express route
export default function(req, res, next) {
const source = new RecordSource();
const store = new Store(source);
const environment = new Environment({network: myNetworkLayer, store});
const variables = {};
const operation = createOperationSelector(
getOperation(query),
variables
);
environment.retain(operation.root);
environment.sendQuery({
operation,
onCompleted: () => {
const renderedComponent = ReactDOM.renderToString(
<QueryLookupRenderer
lookup
environment={environment}
query={query}
variables={variables}
render={({props}) => <TodoApp viewer={props.viewer}/>}
/>
);
res.send(nunjucks.render('index.html', {
renderedComponent: renderedComponent,
records: JSON.stringify(environment.getStore().getSource()),
}));
}
});
}
Client
import ReactDOM from 'react-dom';
import RelayLookupQueryRenderer from './RelayLookupQueryRenderer';
import {
Environment,
RecordSource,
Store,
} from 'relay-runtime';
import query from './myQuery';
// inject server fetched data into client store
const source = new RecordSource(window.records);
const store = new Store(source);
const environment = new Environment({network: myNetworkLayer, store});
ReactDOM.render(
<RelayLookupQueryRenderer
lookup
environment={environment}
query={query}
variables={{}}
render={({error, props}) => {
if (props) {
return <TodoApp viewer={props.viewer} />;
} else {
return <div>Loading</div>;
}
}}
/>,
document.getElementById('root')
);