https://github.com/4Catalyzer/relay-decorators

Utility decorators for Relay components
https://github.com/4Catalyzer/relay-decorators

Last synced: about 1 month ago
JSON representation

Utility decorators for Relay components

• Host: GitHub
• URL: https://github.com/4Catalyzer/relay-decorators
• Owner: 4Catalyzer
• License: mit
• Archived: true
• Created: 2015-12-04T18:40:59.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2019-11-25T14:49:47.000Z (about 5 years ago)
• Last Synced: 2024-05-12T10:03:31.454Z (8 months ago)
• Language: JavaScript
• Size: 16.6 KB
• Stars: 19
• Watchers: 12
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-relay - `relay-decorator` - Simply syntax for Relay containers with ES7 decorators (`@` syntax) (Libraries & Packages)

README

        
# relay-decorators [![npm][npm-badge]][npm]

Utility decorators for [Relay](http://facebook.github.io/relay/) components.

[![Discord][discord-badge]][discord]

## Guide

### Installation

```shell

$ npm install relay-decorators

```

### [`@poll(interval)`](/src/poll.js)

The `@poll` decorator sets up a wrapper component that uses `setInterval` to repeatedly call `props.relay.forceFetch` at a fixed interval (specified in milliseconds). This is not an ideal way to get updating data from a GraphQL server, but is convenient if you don't have proper subscriptions.

```js

import React from 'react';

import Relay from 'react-relay';

import poll from 'relay-decorators/lib/poll';

// type Widget {

//   size: Int

// }

@poll(1000) // Poll every second.

class WidgetSize extends React.Component {

  static propTypes = {

    widget: React.PropTypes.object.isRequired,

  };

  render() {

    return (

      
The current widget size is: {this.props.widget.size}.

    );

  }

}


export default Relay.createContainer(WidgetSize, {

  fragments: {

    widget: () => Relay.QL`

      fragment on Widget {

        size

      }

    `,

  },

});

```

If a polling component has a parent with the same poll interval, the `@poll` decorator will coalesce the poll timeouts to enable the queries to be batched.

[npm-badge]: https://img.shields.io/npm/v/relay-decorators.svg

[npm]: https://www.npmjs.org/package/relay-decorators

[discord-badge]: https://img.shields.io/badge/Discord-join%20chat%20%E2%86%92-738bd7.svg

[discord]: https://discord.gg/0ZcbPKXt5bX40xsQ