Skip to content

Instantly share code, notes, and snippets.

@oojikoo

oojikoo/formikApollo.js

Forked from mwickett/formikApollo.js
Created March 16, 2021 02:28
Show Gist options
  • Save oojikoo/ed0b34f0c589bfeb4458b0d1ccb4526f to your computer and use it in GitHub Desktop.
Save oojikoo/ed0b34f0c589bfeb4458b0d1ccb4526f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mwickett mwickett revised this gist Jul 20, 2017. 1 changed file with 47 additions and 43 deletions.
    90 changes: 47 additions & 43 deletions formikApollo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,55 +1,45 @@
    import React from 'react'
    import { withRouter, Link } from 'react-router-dom'
    import { graphql } from 'react-apollo'
    import { graphql, compose } from 'react-apollo'
    import { Formik } from 'formik'
    import Yup from 'yup'

    import TextInput from '../elements/inputs/TextInput'
    import Button from '../elements/inputs/Button'
    import FormWideError from '../elements/form/FormWideError'
    import TextInput from '../elements/form/TextInput'
    import Button from '../elements/form/Button'
    import { H2 } from '../elements/text/Headings'
    import Wrapper from '../elements/layout/Wrapper'

    import CurrentUser from '../queries/CurrentUser'
    import signinUser from '../mutations/signinUser'

    const formikEnhancer = Formik({
    validationSchema: Yup.object().shape({
    email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
    password: Yup.string()
    .required('Password is required')
    }),
    mapPropsToValues: ({ variables, data }) => ({
    ...variables,
    ...data
    }),
    handleSubmit: (payload, FormikBag) => {
    const { email, password } = payload
    FormikBag.props.signinUser({ variables: { email, password } })
    .then((response) => {
    window.localStorage.setItem('graphcoolToken', response.data.signinUser.token)
    FormikBag.props.data.refetch()
    FormikBag.props.history.push('/')
    }).catch((e) => {
    console.log(e)
    })
    },
    displayName: 'Login'
    })
    const handleSubmit = (payload, { props, setSubmitting, setErrors }) => {
    const {email, password} = payload
    props.signinUser({ variables: { email, password } })
    .then((response) => {
    window.localStorage.setItem('graphcoolToken', response.data.signinUser.token)
    props.data.refetch()
    props.history.push('/')
    }).catch((e) => {
    const errors = e.graphQLErrors.map(error => error.message)
    console.log(errors)
    setSubmitting(false)
    setErrors({ email: ' ', password: ' ', form: errors })
    })
    }

    const LoginForm = ({
    values,
    touched,
    errors,
    handleSubmit,
    errors,
    touched,
    values,
    handleChange,
    handleBlur,
    isSubmitting,
    setTouched
    }) =>
    isSubmitting
    }) =>
    <Wrapper>
    <H2>Sign In</H2>
    <FormWideError error={errors.form} />
    <form onSubmit={handleSubmit}>
    <TextInput
    id='email'
    @@ -85,15 +75,30 @@ const LoginForm = ({
    </form>
    </Wrapper>

    const WithFormikLoginForm = formikEnhancer(LoginForm)
    const LoginFormWithGraphQL = compose(
    graphql(signinUser, {name: 'signinUser'}),
    graphql(CurrentUser, { options: { fetchPolicy: 'network-only' } }),
    Formik({
    validationSchema: Yup.object().shape({
    email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
    password: Yup.string()
    .required('Password is required')
    }),
    mapPropsToValues: ({ variables }) => ({
    ...variables
    }),
    handleSubmit: handleSubmit,
    displayName: 'Login'
    })
    )(LoginForm)

    class Login extends React.Component {
    const LoginFormWithRouter = withRouter(LoginFormWithGraphQL)

    class Login extends React.Component {
    componentWillUpdate (nextProps) {
    // this.props the "about to be old" current props
    // nextProps the next set of props that will be in place once it rerenders
    if (!this.props.data.user && nextProps.data.user) {
    // redirect to dashboard
    this.props.history.push('/dashboard')
    }
    }
    @@ -105,14 +110,13 @@ class Login extends React.Component {

    return (
    <div>
    <WithFormikLoginForm variables={{ email: '', password: '' }} />
    <LoginFormWithRouter variables={{ email: '', password: '' }} />
    <p>Don't have an account? <Link to='/signup'>Create one now</Link></p>
    </div>
    )
    }

    }

    // Set network fetch policy to network only for security reasons
    export default graphql(signinUser, {name: 'signinUser'})(
    graphql(CurrentUser, { options: { fetchPolicy: 'network-only' } })(withRouter(Login))
    )
    export default graphql(CurrentUser, { options: { fetchPolicy: 'network-only' } })(withRouter(Login))
  2. @mwickett mwickett created this gist Jul 20, 2017.
    118 changes: 118 additions & 0 deletions formikApollo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,118 @@
    import React from 'react'
    import { withRouter, Link } from 'react-router-dom'
    import { graphql } from 'react-apollo'
    import { Formik } from 'formik'
    import Yup from 'yup'

    import TextInput from '../elements/inputs/TextInput'
    import Button from '../elements/inputs/Button'
    import { H2 } from '../elements/text/Headings'
    import Wrapper from '../elements/layout/Wrapper'

    import CurrentUser from '../queries/CurrentUser'
    import signinUser from '../mutations/signinUser'

    const formikEnhancer = Formik({
    validationSchema: Yup.object().shape({
    email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
    password: Yup.string()
    .required('Password is required')
    }),
    mapPropsToValues: ({ variables, data }) => ({
    ...variables,
    ...data
    }),
    handleSubmit: (payload, FormikBag) => {
    const { email, password } = payload
    FormikBag.props.signinUser({ variables: { email, password } })
    .then((response) => {
    window.localStorage.setItem('graphcoolToken', response.data.signinUser.token)
    FormikBag.props.data.refetch()
    FormikBag.props.history.push('/')
    }).catch((e) => {
    console.log(e)
    })
    },
    displayName: 'Login'
    })

    const LoginForm = ({
    values,
    touched,
    errors,
    handleSubmit,
    handleChange,
    handleBlur,
    isSubmitting,
    setTouched
    }) =>
    <Wrapper>
    <H2>Sign In</H2>
    <form onSubmit={handleSubmit}>
    <TextInput
    id='email'
    type='email'
    label='Email'
    placeholder='[email protected]'
    error={errors.email && touched.email && errors.email}
    value={values.email}
    onChange={handleChange}
    onBlur={handleBlur}
    />
    <TextInput
    id='password'
    type='password'
    label='Password'
    placeholder=''
    error={errors.password && touched.password && errors.password}
    value={values.password}
    onChange={handleChange}
    onBlur={handleBlur}
    />
    <Button
    primary
    type='submit'
    disabled={
    isSubmitting ||
    !!(errors.email && touched.email) ||
    !!(errors.password && touched.password)
    }
    >
    Sign In
    </Button>
    </form>
    </Wrapper>

    const WithFormikLoginForm = formikEnhancer(LoginForm)

    class Login extends React.Component {

    componentWillUpdate (nextProps) {
    // this.props the "about to be old" current props
    // nextProps the next set of props that will be in place once it rerenders
    if (!this.props.data.user && nextProps.data.user) {
    // redirect to dashboard
    this.props.history.push('/dashboard')
    }
    }

    render () {
    if (this.props.data.loading) {
    return (<div></div>)
    }

    return (
    <div>
    <WithFormikLoginForm variables={{ email: '', password: '' }} />
    <p>Don't have an account? <Link to='/signup'>Create one now</Link></p>
    </div>
    )
    }
    }

    // Set network fetch policy to network only for security reasons
    export default graphql(signinUser, {name: 'signinUser'})(
    graphql(CurrentUser, { options: { fetchPolicy: 'network-only' } })(withRouter(Login))
    )