An open API service indexing awesome lists of open source software.

https://github.com/errorpro/relay-context-provider


https://github.com/errorpro/relay-context-provider

Last synced: about 1 year ago
JSON representation

Awesome Lists containing this project

README

          

# relay-context-provider
Adds relay environment and variables to React Context. Use then when you are fetching queries manually and need to render `fragmentContainers`. This is useful for server side rendering.

## Install
yarn add relay-context-provider

## Usage
```js

import {fetchQuery} from 'react-relay';
import RelayContextProvider from 'relay-context-provider';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

async function (res, req, next) {
const data = await fetchQuery(environment, query, res.query);
const html = ReactDOMServer.renderToString(



);

return html;
});
```

```js

import React from 'react';
import {QueryRenderer} from 'react-relay';
import {withRelay} from 'relay-context-provider';

const MyComponent = ({relay}) => {
return {
if (error) {
return

Error
;
}
if (!props) {
return
Loading
;
}
return
Got viewer: {props.viewer.fullName}
;
}}
/>;
};

export default withRelay(MyComponent);
```

### Isomorphic Example
See the full isomorphic/universal/server side rendered example here: https://github.com/robrichard/relay-modern-isomorphic-example

## Running Tests

```bash
yarn test
```