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 using setEnvironment in your entry point. For example in client.js:

import{setEnvironment}from'relay-compose';importrelayEnvfrom'./createRelayEnvironment'setEnvironment(relayEnv);

And now you are ready to use it.

Examples

FragmentContainer

import{graphql,}from'react-relay';import{fragment}from'relay-compose';importPersonsfrom'./Persons';exportdefaultcompose(fragment(graphql` fragment PersonsContainerDesc on Person @relay(plural: true) { id title } `),connect(mapProps,mapDispatch,mergeProps),)(Persons);

Query renderer(root)

import{graphql,}from'react-relay';import{queryRenderer}from'relay-compose';importPersonsInfoPagefrom'./PersonsInfoPage';import{PersonsContainer}from'../Persons';exportdefaultcompose(queryRenderer(graphql` query PersonsInfoPageContainerQuery { Person { ...PersonsContainerDesc } } `),mapProps(props=>({persons: <PersonsContainerdata={props.Person}/>,})),)(PersonsInfoPage);

Mutations

import{createMutation}from'relay-compose';exportdefaultcompose(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

import{queryRenderer,refetchContainer}from'relay-compose';exportdefaultcompose(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

import{queryRenderer,paginationContainer}from'relay-compose';exportdefaultcompose(queryRenderer(querysongsContainerQuery($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);

Information

This project is still in WIP. You are welcome to participate to it.