Separating React Components in a Relay Project

Question

I have worked with React for a while and I am very excited to learn and adopt Relay.js. I am having alot of trouble finding a way to keep components reusable across multiple projects and still utilize Relay. I was able to detach components from the Relay Containers. Which I thought was the right move. Please see below.

React Component

import React from 'react';
    class ItemList extends React.Component {
        createList(item) {

            return (
                <li id={item.node.id} key={item.node.id}>{item.node.name}</li>
            );
        }
        render() {
           let listValues = this.props.test.edges.map(this.createList);
            console.log(this.props.test);
            return (
                <div>
                    <h1>My List</h1>
                    <ul>
                        {listValues}
                    </ul>
                </div>
            );
        }
    }


    export default ItemList;

Relay Container

import React from 'react';
import Relay from 'react-relay';
import ItemList from './ItemList.js';
    export default Relay.createContainer(ItemList, {
        fragments: {

        },
    });

As I started to learn more about Relay I am starting to see

this.props.relay.getPendingTransactions(this.props.game)

and

this.props.relay.hasOptimisticUpdate(hidingSpot)

When Relay is used in the component level of a React Component I do not see how that component still keeps it's reusability? I am still learning the relay way. I do not see how I can use a component in a styleguide and in multiple projects(another that does not implement relay). I could maybe use a component in multiple Relay Projects but that would be it.

Has anyone else been faced with this issue? When Facebook explains it in https://facebook.github.io/relay/docs/thinking-in-relay.html They make it sound as if components are loosely coupled from relay. What am I missing?

Answer 1

React does not dictate how we should fetch data as it is a UI framework. We can fetch data imperatively (eg, using REST APIs) or declaratively (eg, using Relay). If you are using Relay-specific features (eg, this.props.relay , mutation) in your React components, you made a decision of using declarative data fetching in your application and of using Relay to do so. Therefore, it is not possible to reuse those in a project that does not use Relay. That's the price of using a framework, IMHO.

When Facebook explains it in https://facebook.github.io/relay/docs/thinking-in-relay.html They make it sound as if components are loosely coupled from relay.

It is important to understand how Relay decouples React components .

Relay solves a particular problem of React. The problem arises when we have a hierarchy or tree of components and the parent component needs to know all the data requirements of its child components. Because parent component has to pass all those data down the road as props . When a child component's data requirements need change, it has a cascading effect of change up all the way to the parent.

Relay solves this problem by making it possible for the child components to modify their own data requirements independently, without having to modify the chain up in the component tree. The parent component just needs to declare which child components' data requirements it covers. So, the parent does not need to know the details of components.