relay-compose

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';
import relayEnv from './createRelayEnvironment'

setEnvironment(relayEnv);

And now you are ready to use it.

Examples

FragmentContainer

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)

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: <PersonsContainer data={props.Person} />,
  })),
)(PersonsInfoPage);

Mutations

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

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

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

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.