Feat: update the generator to include graphql option

- The generator now includes an option to add a graphql query and mutation

Author: RyanCCollins

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',

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}}