https://github.com/errorpro/relay-compose
This is HOC for relay modern to work with сomposable components.
https://github.com/errorpro/relay-compose
Last synced: 4 months ago
JSON representation
This is HOC for relay modern to work with сomposable components.
- Host: GitHub
- URL: https://github.com/errorpro/relay-compose
- Owner: ErrorPro
- Created: 2017-06-15T20:10:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T16:29:18.000Z (almost 3 years ago)
- Last Synced: 2025-10-03T00:58:13.348Z (4 months ago)
- Language: JavaScript
- Size: 80.1 KB
- Stars: 29
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Relay-compose
This is a HOC for relay modern to work with сomposable react components.
You probably want to use this when you work with smart and dumb components and you need to compose relay data fetching in your smart component and pass it down to dumb component.
# Setup
`npm install --save relay-compose`
Set relay [environment](https://facebook.github.io/relay/docs/relay-environment.html) using `setEnvironment` in your entry point. For example in `client.js`:
```js
import { setEnvironment } from 'relay-compose';
import relayEnv from './createRelayEnvironment'
setEnvironment(relayEnv);
```
And now you are ready to use it.
# Examples
## FragmentContainer
```js
import {
graphql,
} from 'react-relay';
import { fragment } from 'relay-compose';
import Persons from './Persons';
export default compose(
fragment(graphql`
fragment PersonsContainerDesc on Person @relay(plural: true) {
id
title
}
`),
connect(mapProps, mapDispatch, mergeProps),
)(Persons);
```
## Query renderer(root)
```js
import {
graphql,
} from 'react-relay';
import { queryRenderer } from 'relay-compose';
import PersonsInfoPage from './PersonsInfoPage';
import { PersonsContainer } from '../Persons';
export default compose(
queryRenderer(graphql`
query PersonsInfoPageContainerQuery {
Person {
...PersonsContainerDesc
}
}
`),
mapProps(props => ({
persons: ,
})),
)(PersonsInfoPage);
```
## Mutations
```js
import { createMutation } from 'relay-compose';
export default compose(
mapProps(props => ({
onSubmit: (data) => {
createMutation(graphql`
mutation MyComponentContainerMutation($input: MyInput!) {
createUser(input: $input) {
clientMutationId
}
}
`, {
variables: {
input: data,
},
configs: [{
type: 'RANGE_ADD',
...myConfig,
}],
}).then(res => console.log(res);
},
})),
reduxForm({
form: 'MyForm',
}),
)(MyForm);
```
## RefetchContainer
```js
import { queryRenderer, refetchContainer } from 'relay-compose';
export default compose(
queryRenderer(graphql`
query appQuery {
viewer {
...Test_viewer
}
}
`),
refetchContainer(
{
viewer: graphql.experimental`
fragment Test_viewer on User
@argumentDefinitions(
name: { type: String }
) {
id
firstName
lastName
}
`,
},
graphql.experimental`
query TestQuery($name: String!) {
viewer {
...Test_viewer @arguments(name: $name)
}
}
`,
),
)(Test);
```
## PaginationContainer
```js
import { queryRenderer, paginationContainer } from 'relay-compose';
export default compose(
queryRenderer(
query songsContainerQuery(
$count: Int!
$cursor: String
) {
...songsContainer
}
`),
paginationContainer(
fragment songsContainer on Query {
songs(
first: $count,
after: $cursor,
) @connection(key: "songsContainer_songs") {
edges {
node {
audioId,
name,
coverImageUrl,
artist,
likes,
dislikes,
}
}
}
}
`),
{
direction: 'forward',
query: graphql`
query songsContainerForwardQuery(
$count: Int!
$cursor: String
) {
...songsContainer,
}
`,
getVariables: (_, { count, cursor }) => ({
count,
cursor,
}),
}),
)(Test);
```
## Subscriptions
```js
import { graphql } from 'react-relay';
import { createSubscription } from 'relay-compose';
const subscription = graphql`
subscription UnreadMessageNotificationSubscription($input: String) {
unreadMessageNotification(input: $input) {
unreadMessage
}
}
`;
function create(input) {
return createSubscription(subscription, { input });
}
export default {
create,
};
```
# Information
This project is still in WIP. You are welcome to participate to it.