Minor update to with-apollo-auth (#4426)

Changes
* Update dependencies.
* Remove sending client prop to component on pages.
* Use withApollo correctly on components.
* Use `client.cache.reset()` instead of `prop.client.resetStore()`.

@adamsoffer @timneutkens

examples/with-apollo-auth/components/RegisterBox.js

@@ -14,7 +14,7 @@ const CREATE_USER = gql`
 }
 `
 
-const RegisterBox = (props) => {
+const RegisterBox = ({ client }) => {
   let name, email, password
 
   return (
@@ -25,7 +25,7 @@ const RegisterBox = (props) => {
       })
       // Force a reload of all the current queries now that the user is
       // logged in
-      props.client.resetStore().then(() => {
+      client.cache.reset().then(() => {
         redirect({}, '/')
       })
     }} onError={(error) => {
@@ -33,26 +33,26 @@ const RegisterBox = (props) => {
       console.log(error)
     }}>
       {(create, { data, error }) => (
-        <div>
+        <form onSubmit={e => {
-          <form onSubmit={e => {
+          e.preventDefault()
-            e.preventDefault()
+          e.stopPropagation()
-            e.stopPropagation()
 
-            create({ variables: {
+          create({
+            variables: {
               name: name.value,
               email: email.value,
               password: password.value
-            }})
+            }
+          })
 
-            name.value = email.value = password.value = ''
+          name.value = email.value = password.value = ''
-          }}>
+        }}>
-            { error && <p>Issue occured while registering :(</p> }
+          {error && <p>Issue occured while registering :(</p>}
-            <input name='name' placeholder='Name' ref={node => { name = node }} /><br />
+          <input name='name' placeholder='Name' ref={node => { name = node }} /><br />
-            <input name='email' placeholder='Email' ref={node => { email = node }} /><br />
+          <input name='email' placeholder='Email' ref={node => { email = node }} /><br />
-            <input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
+          <input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
-            <button>Register</button>
+          <button>Register</button>
-          </form>
+        </form>
-        </div>
       )}
 
     </Mutation>

examples/with-apollo-auth/components/SigninBox.js

@@ -12,7 +12,7 @@ const SIGN_IN = gql`
 `
 
 // TODO: Find a better name for component.
-const SigninBox = (props) => {
+const SigninBox = ({ client }) => {
   let email, password
 
   return (
@@ -23,7 +23,7 @@ const SigninBox = (props) => {
       })
       // Force a reload of all the current queries now that the user is
       // logged in
-      props.client.resetStore().then(() => {
+      client.cache.reset().then(() => {
         redirect({}, '/')
       })
     }} onError={(error) => {
@@ -31,24 +31,24 @@ const SigninBox = (props) => {
       console.log(error)
     }}>
       {(signinUser, { data, error }) => (
-        <div>
+        <form onSubmit={e => {
-          <form onSubmit={e => {
+          e.preventDefault()
-            e.preventDefault()
+          e.stopPropagation()
-            e.stopPropagation()
 
-            signinUser({ variables: {
+          signinUser({
+            variables: {
               email: email.value,
               password: password.value
-            }})
+            }
+          })
 
-            email.value = password.value = ''
+          email.value = password.value = ''
-          }}>
+        }}>
-            { error && <p>No user found with that information.</p> }
+          {error && <p>No user found with that information.</p>}
-            <input name='email' placeholder='Email' ref={node => { email = node }} /><br />
+          <input name='email' placeholder='Email' ref={node => { email = node }} /><br />
-            <input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
+          <input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
-            <button>Sign in</button>
+          <button>Sign in</button>
-          </form>
+        </form>
-        </div>
       )}
     </Mutation>
   )

examples/with-apollo-auth/package.json

@@ -9,15 +9,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "apollo-boost": "^0.1.4",
+    "apollo-boost": "^0.1.6",
-    "apollo-link-context": "^1.0.7",
+    "apollo-link-context": "^1.0.8",
     "cookie": "^0.3.1",
     "graphql": "^0.13.2",
     "isomorphic-unfetch": "^2.0.0",
     "next": "latest",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0",
+    "react": "^16.3.2",
-    "react-apollo": "^2.1.1",
+    "react-apollo": "^2.1.4",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.3.2"
   }
 }

examples/with-apollo-auth/pages/create-account.js

@@ -21,12 +21,12 @@ export default class CreateAccount extends React.Component {
 
   render () {
     return (
-      <div>
+      <React.Fragment>
         {/* RegisterBox handles all register logic. */}
-        <RegisterBox client={this.props.client} />
+        <RegisterBox />
         <hr />
         Already have an account? <Link prefetch href='/signin'><a>Sign in</a></Link>
-      </div>
+      </React.Fragment>
     )
   }
 };

examples/with-apollo-auth/pages/signin.js

@@ -21,12 +21,12 @@ export default class Signin extends React.Component {
 
   render () {
     return (
-      <div>
+      <React.Fragment>
         {/* SigninBox handles all login logic. */}
-        <SigninBox client={this.props.client} />
+        <SigninBox />
         <hr />
         New? <Link prefetch href='/create-account'><a>Create account</a></Link>
-      </div>
+      </React.Fragment>
     )
   }
 };