Document Redux form (#136)

* show example with redux form

* add driven by query example

package.json

@@ -81,6 +81,7 @@
     "react-redux": "^4.4.5",
     "react-test-renderer": "^15.3.0",
     "redux": "^3.5.2",
+    "redux-form": "^5.3.2",
     "remap-istanbul": "^0.5.1",
     "source-map-support": "^0.4.0",
     "swapi-graphql": "0.0.4",

test/react-web/client/libraries/redux.tsx

@@ -4,6 +4,7 @@ import * as chai from 'chai';
 import { mount } from 'enzyme';
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { connect } from 'react-redux';
+import { reducer as formReducer, reduxForm } from 'redux-form';
 // import assign = require('object-assign');
 import gql from 'graphql-tag';
 
@@ -85,4 +86,143 @@ describe('redux integration', () => {
 
   });
 
+  it('works with redux form to drive queries', (done) => {
+    const query = gql`query people($name: String) { allPeople(name: $name) { people { name } } }`;
+    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const variables = { name: 'Luke' };
+
+    const networkInterface = mockNetworkInterface(
+      { request: { query, variables }, result: { data } }
+    );
+
+    const client = new ApolloClient({ networkInterface });
+    let wrapper;
+
+    // Typscript workaround
+    const apolloReducer = client.reducer() as () => any;
+
+    const store = createStore(
+      combineReducers({
+        apollo: apolloReducer,
+        form: formReducer,
+      }),
+      applyMiddleware(client.middleware())
+    );
+
+    @reduxForm({
+      form: 'contact',
+      fields: ['firstName'],
+    })
+    @graphql(query, {
+      options: ({ fields }) => ({
+        variables: { name: fields.firstName.value },
+        skip: !fields.firstName.value,
+      }),
+    })
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(nextProps) {
+        const { value } = nextProps.fields.firstName;
+        if (!value) return;
+
+        expect(value).to.equal(variables.name);
+        if (nextProps.data.loading) return;
+
+        expect(nextProps.data.loading).to.be.false;
+        expect(nextProps.data.allPeople).to.deep.equal(data.allPeople);
+        done();
+      }
+
+      render() {
+        const { fields: { firstName }, handleSubmit } = this.props;
+        return (
+          <form onSubmit={handleSubmit}>
+            <div>
+              <label>First Name</label>
+              <input type='text' placeholder='First Name' {...firstName}/>
+            </div>
+            <button type='submit'>Submit</button>
+          </form>
+        );
+      }
+    };
+
+    wrapper = mount(
+      <ProviderMock store={store} client={client}>
+        <Container />
+      </ProviderMock>
+    ) as any;
+
+    setTimeout(() => {
+      wrapper.find('input').simulate('change', {
+        target: { value: variables.name },
+      });
+    }, 100);
+
+  });
+
+  it('works with redux form to be prefilled by queries', (done) => {
+    const query = gql`query people($name: String) { allPeople(name: $name) { people { name } } }`;
+    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const variables = { name: 'Luke' };
+
+    const networkInterface = mockNetworkInterface(
+      { request: { query, variables }, result: { data } }
+    );
+
+    const client = new ApolloClient({ networkInterface });
+    let wrapper;
+
+    // Typscript workaround
+    const apolloReducer = client.reducer() as () => any;
+
+    const store = createStore(
+      combineReducers({
+        apollo: apolloReducer,
+        form: formReducer,
+      }),
+      applyMiddleware(client.middleware())
+    );
+
+    @graphql(query, { options: () => ({ variables }) })
+    @reduxForm({
+      form: 'contact',
+      fields: ['firstName'],
+    }, (state, ownProps) => ({
+      initialValues: {
+        firstName: ownProps.data.loading ? '' : ownProps.data.allPeople.people[0].name,
+      },
+    }))
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(nextProps) {
+        const { value, initialValue } = nextProps.fields.firstName;
+        if (!value) return;
+
+        expect(initialValue).to.equal(data.allPeople.people[0].name);
+        expect(value).to.equal(data.allPeople.people[0].name);
+
+        done();
+      }
+
+      render() {
+        const { fields: { firstName }, handleSubmit } = this.props;
+        return (
+          <form onSubmit={handleSubmit}>
+            <div>
+              <label>First Name</label>
+              <input type='text' placeholder='First Name' {...firstName}/>
+            </div>
+            <button type='submit'>Submit</button>
+          </form>
+        );
+      }
+    };
+
+    mount(
+      <ProviderMock store={store} client={client}>
+        <Container />
+      </ProviderMock>
+    ) as any;
+
+  });
+
 });

typings.json

@@ -20,6 +20,7 @@
     "invariant": "registry:npm/invariant#2.0.0+20160211003958",
     "lodash": "registry:npm/lodash#4.0.0+20160412191219",
     "object-assign": "registry:npm/object-assign#4.0.1+20160301180549",
-    "react-redux": "registry:npm/react-redux#4.4.0+20160614222153"
+    "react-redux": "registry:npm/react-redux#4.4.0+20160614222153",
+    "redux-form": "registry:npm/redux-form#4.0.3+20160310030142"
   }
 }

typings/index.d.ts

@@ -14,4 +14,5 @@
 /// <reference path="modules/lodash/index.d.ts" />
 /// <reference path="modules/object-assign/index.d.ts" />
 /// <reference path="modules/react-redux/index.d.ts" />
+/// <reference path="modules/redux-form/index.d.ts" />
 /// <reference path="modules/sinon/index.d.ts" />