From b321e6e9426781504661704bd7e2e112b219840f Mon Sep 17 00:00:00 2001 From: "Tage A. L. K" Date: Sat, 31 Mar 2018 08:11:36 +0200 Subject: [PATCH] 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 --- .../components/RegisterBox.js | 62 +++++++++++++++ .../with-apollo-auth/components/SigninBox.js | 57 +++++++++++++ examples/with-apollo-auth/lib/initApollo.js | 5 +- examples/with-apollo-auth/package.json | 14 ++-- .../with-apollo-auth/pages/create-account.js | 79 ++----------------- examples/with-apollo-auth/pages/signin.js | 72 ++--------------- 6 files changed, 142 insertions(+), 147 deletions(-) create mode 100644 examples/with-apollo-auth/components/RegisterBox.js create mode 100644 examples/with-apollo-auth/components/SigninBox.js diff --git a/examples/with-apollo-auth/components/RegisterBox.js b/examples/with-apollo-auth/components/RegisterBox.js new file mode 100644 index 00000000..3f8cadbd --- /dev/null +++ b/examples/with-apollo-auth/components/RegisterBox.js @@ -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 ( + { + // 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 }) => ( +
+
{ + e.preventDefault() + e.stopPropagation() + + create({ variables: { + name: name.value, + email: email.value, + password: password.value + }}) + + name.value = email.value = password.value = '' + }}> + { error &&

Issue occured while registering :(

} + { name = node }} />
+ { email = node }} />
+ { password = node }} type='password' />
+ +
+
+ )} + + + ) +} + +export default withApollo(RegisterBox) diff --git a/examples/with-apollo-auth/components/SigninBox.js b/examples/with-apollo-auth/components/SigninBox.js new file mode 100644 index 00000000..fd48f1c0 --- /dev/null +++ b/examples/with-apollo-auth/components/SigninBox.js @@ -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 ( + { + // 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 }) => ( +
+
{ + e.preventDefault() + e.stopPropagation() + + signinUser({ variables: { + email: email.value, + password: password.value + }}) + + email.value = password.value = '' + }}> + { error &&

No user found with that information.

} + { email = node }} />
+ { password = node }} type='password' />
+ +
+
+ )} + + ) +} + +export default withApollo(SigninBox) diff --git a/examples/with-apollo-auth/lib/initApollo.js b/examples/with-apollo-auth/lib/initApollo.js index 05f39f3d..5dec4e7b 100644 --- a/examples/with-apollo-auth/lib/initApollo.js +++ b/examples/with-apollo-auth/lib/initApollo.js @@ -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 -} \ No newline at end of file +} diff --git a/examples/with-apollo-auth/package.json b/examples/with-apollo-auth/package.json index c7a22a8e..b9679686 100644 --- a/examples/with-apollo-auth/package.json +++ b/examples/with-apollo-auth/package.json @@ -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", diff --git a/examples/with-apollo-auth/pages/create-account.js b/examples/with-apollo-auth/pages/create-account.js index 75968072..a5b59d3d 100644 --- a/examples/with-apollo-auth/pages/create-account.js +++ b/examples/with-apollo-auth/pages/create-account.js @@ -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 (
- {/* this.props.create is the mutation function provided by apollo below */} -
-
-
-
- -
+ {/* RegisterBox handles all register logic. */} +
Already have an account? Sign in
@@ -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) diff --git a/examples/with-apollo-auth/pages/signin.js b/examples/with-apollo-auth/pages/signin.js index 2c1ba925..e0397651 100644 --- a/examples/with-apollo-auth/pages/signin.js +++ b/examples/with-apollo-auth/pages/signin.js @@ -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 (
- {/* this.props.signin is the mutation function provided by apollo below */} -
-
-
- -
+ {/* SigninBox handles all login logic. */} +
New? Create account
@@ -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)