diff --git a/config/generators/container/index.js b/config/generators/container/index.js index 1466a63..0329a6b 100644 --- a/config/generators/container/index.js +++ b/config/generators/container/index.js @@ -29,6 +29,12 @@ module.exports = { default: true, message: 'Do you want actions/constants/reducer for this container?', }, + { + type: 'confirm', + name: 'wantGraphQL', + default: false, + message: 'Do you want a colocated GraphQL / Apollo query and mutation for this container?', + }, ], actions: (data) => { const actions = [{ @@ -76,7 +82,7 @@ module.exports = { templateFile: './container/actions.test.js.hbs', abortOnFail: true, }); - + actions.push({ type: 'modify', path: '../../app/src/store.js', diff --git a/config/generators/container/index.js.hbs b/config/generators/container/index.js.hbs index f7dbb78..b6832c1 100644 --- a/config/generators/container/index.js.hbs +++ b/config/generators/container/index.js.hbs @@ -8,8 +8,12 @@ import * as {{ properCase name }}ActionCreators from './actions'; import cssModules from 'react-css-modules'; import styles from './index.module.scss'; {{/if}} +{{#if wantGraphQL}} +import { graphql } from 'react-apollo'; +import gql from 'graphql-tag'; +{{/if}} -class {{ properCase name }} extends Component { // eslint-disable-line react/prefer-stateless-function +class {{ properCase name }}Container extends Component { // eslint-disable-line react/prefer-stateless-function render() { return ( {{#if wantSCSSModules}} @@ -36,18 +40,52 @@ const mapDispatchToProps = (dispatch) => ({ ), }); {{/if}} - {{#if wantSCSSModules}} -const Container = cssModules({{ properCase name }}, styles); + +const Container = cssModules({{ properCase name }}Container, styles); {{else}} -const Container = {{ properCase name }}; + +const Container = {{ properCase name }}Container; {{/if}} +{{#if wantGraphQL}} +const {{ camelCase name }}Query = gql` + query {{ camelCase name }} { + id + } +`; + +const ContainerWithData = graphql({{ camelCase name }}Query, { + props: ({ data: { loading, error, {{ camelCase name }} } }) => ({ + {{ camelCase name }}, + loading, + error, + }), +})(Container); + +const {{ camelCase name }}Mutation = gql` + mutation {{ camelCase name }} { + id + } +`; + +const ContainerWithMutation = graphql({{ camelCase name }}Mutation)(ContainerWithData); +{{/if}} {{#if wantActionsAndReducer}} + {{#if wantGraphQL}} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(ContainerWithMutation); + {{else}} + export default connect( mapStateToProps, mapDispatchToProps )(Container); +{{/if}} {{else}} + export default Container; {{/if}}