React-apollo: [Question] adding multiple graphql containers to components

[strangegit]

The basic usage of graphql is as follows:

import React, { Component } from 'react';
import { graphql } from 'react-apollo';

// MyComponent is a "presentational" or apollo-unaware component,
// It could be a simple React class
class MyComponent extends Component {
  render() {
    return <div>...</div>;
  }
}
// Or a stateless functional component:
const MyComponent = (props) => <div>...</div>;

// MyComponentWithData provides the query or mutation defined by
// QUERY_OR_MUTATION to MyComponent. We'll see how below.
const withData = graphql(QUERY_OR_MUTATION, options);
const MyComponentWithData = withData(MyComponent);

But what if I need to add more than one QUERY OR MUTATION to MyComponent?

I think there is a better way than - MyComponentWithData2 = withdata2(MyComponentWithData)

[stubailo]

You need to add two graphql containers to have two queries. It might feel unusual, but I think using multiple containers for stuff like this is pretty common in modern React code.

You can also do it like this:

import { compose } from 'redux';

const twoQueriesContainer = compose(
  graphql(QUERY1),
  graphql(QUERY2)
);

const MyComponentWithData = twoQueriesContainer(MyComponent)

@jbaxleyiii should we document using compose somewhere?

[strangegit]

thanks

[jbaxleyiii]

@stubailo I'd say one better and include it as an export and document it

[stubailo]

Good idea IMO!