1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Remove deprected and refactor with-apollo-auth (#4070)

* Remove deprected use of apollo-client-preset, and refactor

Changes
* Remove deprected use of apollo-client-preset in favor of apollo-boost
* Refactor for usage of react-apollo@2.1

* Use standard

Just ran standard --fix
This commit is contained in:
Tage A. L. K 2018-03-31 08:11:36 +02:00 committed by Tim Neutkens
parent 812db745f8
commit b321e6e942
6 changed files with 142 additions and 147 deletions

View file

@ -0,0 +1,62 @@
import { Mutation, withApollo } from 'react-apollo'
import gql from 'graphql-tag'
import cookie from 'cookie'
import redirect from '../lib/redirect'
const CREATE_USER = gql`
mutation Create($name: String!, $email: String!, $password: String!) {
createUser(name: $name, authProvider: { email: { email: $email, password: $password }}) {
id
}
signinUser(email: { email: $email, password: $password }) {
token
}
}
`
const RegisterBox = (props) => {
let name, email, password
return (
<Mutation mutation={CREATE_USER} onCompleted={(data) => {
// Store the token in cookie
document.cookie = cookie.serialize('token', data.signinUser.token, {
maxAge: 30 * 24 * 60 * 60 // 30 days
})
// Force a reload of all the current queries now that the user is
// logged in
props.client.resetStore().then(() => {
redirect({}, '/')
})
}} onError={(error) => {
// If you want to send error to external service?
console.log(error)
}}>
{(create, { data, error }) => (
<div>
<form onSubmit={e => {
e.preventDefault()
e.stopPropagation()
create({ variables: {
name: name.value,
email: email.value,
password: password.value
}})
name.value = email.value = password.value = ''
}}>
{ error && <p>Issue occured while registering :(</p> }
<input name='name' placeholder='Name' ref={node => { name = node }} /><br />
<input name='email' placeholder='Email' ref={node => { email = node }} /><br />
<input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
<button>Register</button>
</form>
</div>
)}
</Mutation>
)
}
export default withApollo(RegisterBox)

View file

@ -0,0 +1,57 @@
import { Mutation, withApollo } from 'react-apollo'
import gql from 'graphql-tag'
import cookie from 'cookie'
import redirect from '../lib/redirect'
const SIGN_IN = gql`
mutation Signin($email: String!, $password: String!) {
signinUser(email: { email: $email, password: $password}) {
token
}
}
`
// TODO: Find a better name for component.
const SigninBox = (props) => {
let email, password
return (
<Mutation mutation={SIGN_IN} onCompleted={(data) => {
// Store the token in cookie
document.cookie = cookie.serialize('token', data.signinUser.token, {
maxAge: 30 * 24 * 60 * 60 // 30 days
})
// Force a reload of all the current queries now that the user is
// logged in
props.client.resetStore().then(() => {
redirect({}, '/')
})
}} onError={(error) => {
// If you want to send error to external service?
console.log(error)
}}>
{(signinUser, { data, error }) => (
<div>
<form onSubmit={e => {
e.preventDefault()
e.stopPropagation()
signinUser({ variables: {
email: email.value,
password: password.value
}})
email.value = password.value = ''
}}>
{ error && <p>No user found with that information.</p> }
<input name='email' placeholder='Email' ref={node => { email = node }} /><br />
<input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
<button>Sign in</button>
</form>
</div>
)}
</Mutation>
)
}
export default withApollo(SigninBox)

View file

@ -1,6 +1,5 @@
import { ApolloClient } from 'apollo-client'
import { ApolloClient, InMemoryCache } from 'apollo-boost'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'
import fetch from 'isomorphic-unfetch'
@ -48,4 +47,4 @@ export default function initApollo (initialState, options) {
}
return apolloClient
}
}

View file

@ -10,16 +10,16 @@
"test": "NODE_ENV=test ava"
},
"dependencies": {
"apollo-client-preset": "1.0.2",
"apollo-link-context": "1.0.0",
"apollo-boost": "^0.1.4",
"apollo-link-context": "^1.0.7",
"cookie": "^0.3.1",
"graphql": "0.11.7",
"graphql": "^0.13.2",
"isomorphic-unfetch": "^2.0.0",
"next": "latest",
"prop-types": "^15.5.10",
"react": "^16.0.0",
"react-apollo": "2.0.0",
"react-dom": "^16.0.0"
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-apollo": "^2.1.1",
"react-dom": "^16.2.0"
},
"devDependencies": {
"ava": "^0.19.1",

View file

@ -1,13 +1,13 @@
import React from 'react'
import { graphql, withApollo, compose } from 'react-apollo'
import cookie from 'cookie'
import { compose } from 'react-apollo'
import Link from 'next/link'
import gql from 'graphql-tag'
import withData from '../lib/withData'
import redirect from '../lib/redirect'
import checkLoggedIn from '../lib/checkLoggedIn'
import RegisterBox from '../components/RegisterBox'
class CreateAccount extends React.Component {
static async getInitialProps (context, apolloClient) {
const { loggedInUser } = await checkLoggedIn(context, apolloClient)
@ -24,13 +24,8 @@ class CreateAccount extends React.Component {
render () {
return (
<div>
{/* this.props.create is the mutation function provided by apollo below */}
<form onSubmit={this.props.create}>
<input type='text' placeholder='Your Name' name='name' /><br />
<input type='email' placeholder='Email' name='email' /><br />
<input type='password' placeholder='Password' name='password' /><br />
<button>Create account</button>
</form>
{/* RegisterBox handles all register logic. */}
<RegisterBox client={this.props.client} />
<hr />
Already have an account? <Link prefetch href='/signin'><a>Sign in</a></Link>
</div>
@ -38,67 +33,7 @@ class CreateAccount extends React.Component {
}
};
export default compose(
export default compose( // TODO: Maybe remove the usage of compose?
// withData gives us server-side graphql queries before rendering
withData,
// withApollo exposes `this.props.client` used when logging out
withApollo,
graphql(
// The `createUser` & `signinUser` mutations are provided by graph.cool by
// default.
// Multiple mutations are executed by graphql sequentially
gql`
mutation Create($name: String!, $email: String!, $password: String!) {
createUser(name: $name, authProvider: { email: { email: $email, password: $password }}) {
id
}
signinUser(email: { email: $email, password: $password }) {
token
}
}
`,
{
// Use an unambiguous name for use in the `props` section below
name: 'createWithEmail',
// Apollo's way of injecting new props which are passed to the component
props: ({
createWithEmail,
// `client` is provided by the `withApollo` HOC
ownProps: { client }
}) => ({
// `create` is the name of the prop passed to the component
create: (event) => {
/* global FormData */
const data = new FormData(event.target)
event.preventDefault()
event.stopPropagation()
createWithEmail({
variables: {
email: data.get('email'),
password: data.get('password'),
name: data.get('name')
}
}).then(({ data: { signinUser: { token } } }) => {
// Store the token in cookie
document.cookie = cookie.serialize('token', token, {
maxAge: 30 * 24 * 60 * 60 // 30 days
})
// Force a reload of all the current queries now that the user is
// logged in
client.resetStore().then(() => {
// Now redirect to the homepage
redirect({}, '/')
})
}).catch((error) => {
// Something went wrong, such as incorrect password, or no network
// available, etc.
console.error(error)
})
}
})
}
)
withData
)(CreateAccount)

View file

@ -1,13 +1,13 @@
import React from 'react'
import { graphql, withApollo, compose } from 'react-apollo'
import cookie from 'cookie'
import { compose } from 'react-apollo'
import Link from 'next/link'
import gql from 'graphql-tag'
import withData from '../lib/withData'
import redirect from '../lib/redirect'
import checkLoggedIn from '../lib/checkLoggedIn'
import SigninBox from '../components/SigninBox'
class Signin extends React.Component {
static async getInitialProps (context, apolloClient) {
const { loggedInUser } = await checkLoggedIn(context, apolloClient)
@ -24,12 +24,8 @@ class Signin extends React.Component {
render () {
return (
<div>
{/* this.props.signin is the mutation function provided by apollo below */}
<form onSubmit={this.props.signin}>
<input type='email' placeholder='Email' name='email' /><br />
<input type='password' placeholder='Password' name='password' /><br />
<button>Sign in</button>
</form>
{/* SigninBox handles all login logic. */}
<SigninBox client={this.props.client} />
<hr />
New? <Link prefetch href='/create-account'><a>Create account</a></Link>
</div>
@ -37,61 +33,7 @@ class Signin extends React.Component {
}
};
export default compose(
export default compose( // TODO: Maybe remove the usage of compose?
// withData gives us server-side graphql queries before rendering
withData,
// withApollo exposes `this.props.client` used when logging out
withApollo,
graphql(
// The `signinUser` mutation is provided by graph.cool by default
gql`
mutation Signin($email: String!, $password: String!) {
signinUser(email: { email: $email, password: $password }) {
token
}
}
`,
{
// Use an unambiguous name for use in the `props` section below
name: 'signinWithEmail',
// Apollo's way of injecting new props which are passed to the component
props: ({
signinWithEmail,
// `client` is provided by the `withApollo` HOC
ownProps: { client }
}) => ({
// `signin` is the name of the prop passed to the component
signin: (event) => {
/* global FormData */
const data = new FormData(event.target)
event.preventDefault()
event.stopPropagation()
signinWithEmail({
variables: {
email: data.get('email'),
password: data.get('password')
}
}).then(({ data: { signinUser: { token } } }) => {
// Store the token in cookie
document.cookie = cookie.serialize('token', token, {
maxAge: 30 * 24 * 60 * 60 // 30 days
})
// Force a reload of all the current queries now that the user is
// logged in
client.resetStore().then(() => {
// Now redirect to the homepage
redirect({}, '/')
})
}).catch((error) => {
// Something went wrong, such as incorrect password, or no network
// available, etc.
console.error(error)
})
}
})
}
)
withData
)(Signin)