How to use react-relay - 10 common examples

});
    }
    return this.layer.sendMutation(mutationRequest);
  }

  supports(...options) {
    return this.layer.supports(...options);
  }
}

const withLogging = (name, layer) => {
  return new RelayLoggingNetworkLayer(name, layer);
}

// SUT
Relay.injectNetworkLayer(withLogging('composite', new RelayCompositeNetworkLayer({
  ...config,
  layers: {
    server: withLogging('server', new RelayLocalSchema.NetworkLayer({schema: serverSchema})),
    local: withLogging('local', new RelayLocalSchema.NetworkLayer({schema: localSchema}))
  }
})));

describe('RelayCompositeNetworkLayer', () => {

  it('it can query a single schemas', async () => {

    const node = Relay.QL`
      query {
        viewer {
          name
        }

if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
      return;
    }
    // Fetch the next 10 feed items
    this.props.relay.loadMore(2, () => {
      // console.log(error);
    });
  }
}

Vulnerabilities.propTypes = {
  data: PropTypes.object,
  relay: PropTypes.object,
};

export default createPaginationContainer(
  Vulnerabilities,
  {
    data: graphql`
        fragment Vulnerabilities_data on Query @argumentDefinitions(
            count: {type: "Int", defaultValue: 25}
            cursor: {type: "ID"}
            orderBy: {type: "UsersOrdering", defaultValue: ID}
        ) {
            users(
                first: $count
                after: $cursor
                orderBy: $orderBy # Non-pagination variables
            ) @connection(key: "Pagination_users") {
                edges {
                    node {
                        id

const onFailure = (transaction) => {
      const error = transaction.getError();
      // eslint-disable-next-line no-console
      console.error(`Error performing Memebuster mutation: ${error}`);
      this.setState({ pending: false });
    };

    const onSuccess = () => {
      this.setState({ pending: false });
    };

    const annotation = this.getLastSaveAnnotation();

    if (!annotation) {
      Relay.Store.commitUpdate(
        new CreateMemebusterMutation({
          image: imageFile,
          parent_type: 'project_media',
          annotator: this.getContext().currentUser,
          annotated: this.props.media,
          annotation: {
            action,
            fields,
            annotated_type: 'ProjectMedia',
            annotated_id: this.props.media.dbid,
          },
        }),
        { onFailure, onSuccess },
      );
    } else {
      Relay.Store.commitUpdate(

render() {

    const { token } = this.state;

    if (token) {
      const config = {
        fetchTimeout: 5000,   // Timeout after 5s.
        retryDelays: [1000, 3000, 5000, 15000, 30000],   // Retry after 1s, 3s, 5s, 15s and 30s
        headers: {
          Authorization: `Bearer ${token}`
        }
      };

      Relay.injectNetworkLayer(
        new LoggingNetworkLayer('https://api.blackwall.co/backend/cerebro/graphql', config)
        //new LoggingNetworkLayer('http://localhost:3000/graphql', config)
      );

      const renderApp = ({done, error, props, retry, stale}) => {
        if (error) {
          console.log('error', error);
          return ;
        } else if (props) {
          return ;
        } else {
          return ;
        }
      }

      return (

import React, { Component } from 'react'
import Relay, {
  DefaultNetworkLayer,
} from 'react-relay'

import { API_BASE } from 'ReactNotes/store/constants/api'

import App from './containers/App'

import { Provider } from 'react-redux'

import { store } from 'ReactNotes/store/config'

Relay.injectNetworkLayer(
  new DefaultNetworkLayer(`${API_BASE}/graphql`)
)

export default props => (
  
    
  
)

// hotfix in case babel remove console does not work
if(!__DEV__) {
    console = {};
    console.log = () => {};
    console.error = () => {};
}

* relay-muckaround/packages/relay-runtime/store/RelayModernEnvironment.js #sendSubscription
    *RelayModernEnvironment#sendSubscription({
      onCompleted,
      onNext,
      onError,
      operation,
      updater,
    }: {
      onCompleted?: ?(errors: ?Array) => void,
      onNext?: ?(payload: RelayResponsePayload) => void,
      onError?: ?(error: Error) => void,
      operation: OperationSelector,
      updater?: ?SelectorStoreUpdater,
    }): Disposable
   */
  requestSubscription(environment, {
    subscription,
    variables: arg,
    // after socket has been closed successfully
    onCompleted: () => {
      alert('done!'); /* need this if payload doesn't contain an id field*/
    },
    // connection_err ..etc
    onError: error => console.error(error),
    //end of pipe line; after store merged
    onNext: response => {},
    // begin of pipe line; before store merged
    updater: (
      store /*RelayRecordSourceSelectorProxy*/,
      data /*selector data, raw json*/
    ) => {
      //@see:   relay-muckaround/packages/relay-runtime/store/RelayPublishQueue.js

const subscribe = ({
  environment,
  subscriptionOptions,
}: {|
  environment: Object,
  subscriptionOptions: Object,
|}) => {
  requestSubscription(environment, {
    ...subscriptionOptions,
    // onNext: data => {
    //   console.log('RX at END-USER-LEVEL:', data);
    // },
  });
};

text: {
    fontSize: 20,
  },
  count: {
    color: colors["gray-semibold"],
  },
  section: {
    marginBottom: 40,
  },
  sectionSeparator: {
    marginTop: 40, // FIXME: This is because the above `section.marginBottom` didn’t work before the separator.
    marginBottom: 20,
  },
})

export default createFragmentContainer(Artworks, {
  artist: graphql`
    fragment Artworks_artist on Artist {
      counts {
        artworks
        for_sale_artworks
      }
      ...ArtistForSaleArtworksGrid_artist
      ...ArtistNotForSaleArtworksGrid_artist
    }
  `,
})

}
    })
  }

  render(){    
    const post = copyFromRelay(this.props.node)    
    return (
      this.postForm=com}  initialValues={post} />
    )
  }

}

// should not share fragment between component !!!
export default Relay.createContainer(PostFormEdit, { 
  fragments: {

    node: () => Relay.QL `
      fragment OnePost on Post {
        id
        title
        lead_sentence
        published_at
        tags {
          id
          name
        }
        items {
          id
          target_type
          sort_rank

teamMember: this.props.teamMember
    });

    Relay.Store.commitUpdate(mutation, {
      onFailure: (transaction) => {
        // Remove the "removing" spinner
        this.setState({ removing: false });

        // Show the mutation error
        FlashesStore.flash(FlashesStore.ERROR, transaction.getError());
      }
    });
  }
}

export default Relay.createContainer(Row, {
  fragments: {
    teamMember: () => Relay.QL`
      fragment on TeamMember {
        id
        role
        team {
          id
          name
          description
          slug
          privacy
          organization {
            slug
          }
          pipelines {
            count