Skip to content

This is HOC for relay modern to work with сomposable components.

Notifications You must be signed in to change notification settings

ErrorPro/relay-compose

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

This is HOC for relay modern to work with сomposable components.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published