UserForm.js

import { gql, graphql } from 'react-apollo';
import { Formik } from 'formik';

const validate = values => {
	return {}; //simplified for now 
};

const getInitialValues = user => ({
	firstName: user && user.firstName || '',
	lastName: user && user.lastName || '',
	userId: user && user.userId || ''
});

const doSubmit = (values, { setSubmitting, setErrors }) => {
	console.log('UserForm submitted', values); //simplified for now
};

const editUserQuery = gql`
	query GetUserForEdit($userId: ID!) {
		user(userId: $userId) {
			firstName
			lastName
			userId
		}
	}
`;

const UserForm = ({ data: { user, loading, error } }) => {
	if (loading) return null;
	
	console.log('in userform', user);
	return (
		<Formik
			enableReinitialize
			initialValues={getInitialValues(user)}
			validate={validate}
			onSubmit={doSubmit}
			render={({ values, errors, handleChange, handleBlur, handleSubmit, isSubmitting }) => {
				console.log('in formik', values);
				return (
					<form className="form-horizontal" role="form" onSubmit={handleSubmit}>
						<div className="row">
							<div className="col-md-4">
								<input
									type="text"
									name="userId"
									id="userId"
									value={values.userId}
									onChange={handleChange}
									onBlur={handleBlur}
								/>
							</div>
						</div>
					</form>
				);
			}}
		/>
	);
};

/*
  I'm using next-routes (https://github.com/fridays/next-routes) for custom routing
  When I include <UserForm> in a screen, I do it thusly:
      <UserForm userId={props.url.query.userId} />
  So the userId is part of the props passed to the options function below, and is
  used to fill in the userId variable for the graphql query.
*/
export default graphql(editUserQuery, {
	options: ({ userId }) => ({ variables: { userId } })
})(UserForm);