Document Redux form

[jbaxleyiii]

This introduces two test cases for usage with redux-form

[Xiphe]

For people landing here and searching a reference implementation: this has been moved to

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

Lines 93 to 169 in 8af4384

	describe('redux-form', () => {
	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, addTypename: false });
	// Typscript workaround
	const apolloReducer = client.reducer() as () => any;
	const store = createStore(
	combineReducers({
	apollo: apolloReducer,
	form: formReducer,
	}),
	applyMiddleware(client.middleware()),
	);
	function MyField({ input: { value } }) {
	if (!value) return null;
	expect(value).toBe(data.allPeople.people[0].name);
	done();
	// wrapper.unmount();
	return null;
	}
	@graphql(query, {
	options: () => ({ variables }),
	props: ({ data: { loading, allPeople } }) => ({
	initialValues: {
	firstName: loading ? '' : allPeople.people[0].name,
	},
	}),
	})
	@reduxForm({
	form: 'contact',
	fields: ['firstName'],
	enableReinitialize: true,
	})
	class Container extends React.Component<any, any> {
	render() {
	const { fields: { firstName }, handleSubmit } = this.props;
	return (
	<form onSubmit={handleSubmit}>
	<div>
	<label>First Name</label>
	<Field name="firstName" component={MyField} />
	</div>
	<button type="submit">Submit</button>
	</form>
	);
	}
	}
	mount(
	<ApolloProvider store={store} client={client}>
	<Container />
	</ApolloProvider>,
	) as any;
	});
	});