Relay's original QueryRenderer requires an environment to determine the graphql endpoint to talk with. Mostly you will do something like this:
- pass down through props
- store in the window to access it later on
- store it in a registry object to access it later on
This is where relay-context comes into play. It provides a high-order component to register your environment(s) at one place (see Example > Main entry point). It is also possible to specify a default environment for your QueryRenderer.
yarn add relay-context
npm i --save relay-context
import { Context } from 'relay-context';
import { render } from 'react-dom';
import App from './components/App';
// create your relay environment(s)
const environmentA = new Environment();
const environmentB = new Environment();
render(
<Context environmentRegistry={{ a: environmentA, b: environmentB }} defaultEnvironment="a">
<App />
</Context>
)import React from 'react';
import { QueryRenderer } from 'relay-context'
import { graphql } from 'react-relay';
export default ({ slug }) => <QueryRenderer
variables={{ slug }}
environment="b" // uses b
query={graphql`
query BeerQuery(
$slug: String!
) {
query {
beer: beerBySlug(slug: $slug) {
title
slug
rating
related(limit: 10) {
title
slug
rating
}
}
}
}
`}
render={({ error, props }) => {
// TODO: render stuff
}}
/>;