diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/DeleteItem.js | 5 | ||||
| -rw-r--r-- | frontend/components/Signin.js | 80 | ||||
| -rw-r--r-- | frontend/lib/withData.js | 36 |
3 files changed, 57 insertions, 64 deletions
diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js index 30b2bf7..8609ca7 100644 --- a/frontend/components/DeleteItem.js +++ b/frontend/components/DeleteItem.js @@ -2,6 +2,7 @@ import React from 'react'; import { Mutation } from 'react-apollo'; import PropTypes from 'prop-types'; import { REMOVE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/index'; +import Error from './ErrorMessage'; class DeleteItem extends React.Component { static propTypes = { @@ -20,7 +21,7 @@ class DeleteItem extends React.Component { render() { return ( <Mutation mutation={REMOVE_ITEM_MUTATION} variables={{ id: this.props.id }} update={this.update}> - {removeItem => ( + {(removeItem, { error }) => ( <button onClick={() => { if (confirm('Are you sure you want to delete this item?')) { @@ -28,7 +29,7 @@ class DeleteItem extends React.Component { } }} > - × Delete item + {error ? error.message : '× Delete Item'} </button> )} </Mutation> diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js index eeff57c..e701e94 100644 --- a/frontend/components/Signin.js +++ b/frontend/components/Signin.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; -import { Mutation, Query } from 'react-apollo'; +import { Mutation, Query, ApolloConsumer } from 'react-apollo'; import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries'; import Error from './ErrorMessage'; import Form from './styles/Form'; +import { client } from '../lib/withData'; class Signin extends Component { state = { @@ -10,18 +11,11 @@ class Signin extends Component { password: 'abc123', }; - loginUser = async (e, signin, refetchUser) => { + loginUser = async (e, signin, client) => { e.preventDefault(); const res = await signin(); localStorage.setItem('token', res.data.signin.token); - await refetchUser(); - // TODO refetch current user query - }; - - update = (proxy, payload) => { - const data = proxy.readQuery({ query: CURRENT_USER_QUERY }); - data.me = payload.data.signin.user; - proxy.writeQuery({ query: CURRENT_USER_QUERY, data }); + client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); }; saveToState = e => { @@ -32,44 +26,40 @@ class Signin extends Component { render() { // TODO / ASK - do I really have to wrap this in a query just to access the refetch function return ( - <Query query={CURRENT_USER_QUERY}> - {({ refetch }) => ( - <Mutation mutation={SIGNIN_MUTATION} variables={this.state}> - {(signin, { data, loading, error }) => ( - <Form onSubmit={e => this.loginUser(e, signin, refetch)}> - <Error error={error} /> - <fieldset disabled={loading} aria-busy={loading}> - <label htmlFor="email"> - Email - <input - value={this.state.email} - onChange={this.saveToState} - name="email" - type="text" - placeholder="email" - /> - </label> + <Mutation mutation={SIGNIN_MUTATION} variables={this.state}> + {(signin, { data, loading, error }) => ( + <Form onSubmit={e => this.loginUser(e, signin, client)}> + <Error error={error} /> + <fieldset disabled={loading} aria-busy={loading}> + <label htmlFor="email"> + Emailx + <input + value={this.state.email} + onChange={this.saveToState} + name="email" + type="text" + placeholder="email" + /> + </label> - <label htmlFor="password"> - Password - <input - type="password" - name="password" - id="password" - className="password" - placeholder="password" - value={this.state.password} - onChange={this.saveToState} - /> - </label> + <label htmlFor="password"> + Password + <input + type="password" + name="password" + id="password" + className="password" + placeholder="password" + value={this.state.password} + onChange={this.saveToState} + /> + </label> - <button type="submit">Sign In!</button> - </fieldset> - </Form> - )} - </Mutation> + <button type="submit">Sign In!</button> + </fieldset> + </Form> )} - </Query> + </Mutation> ); } } diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js index 1a152a3..5c4614f 100644 --- a/frontend/lib/withData.js +++ b/frontend/lib/withData.js @@ -3,25 +3,27 @@ import ApolloClient from 'apollo-boost'; // can also be a function that accepts a `headers` object (SSR only) and returns a config -export default withApollo({ - client: new ApolloClient({ - uri: 'http://localhost:4444', - // cache: new InMemoryCache().restore(initialState || {}), - ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) - request: operation => { - console.log(operation); - if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) { - console.log(`Bearer ${localStorage.getItem('token')}`); - operation.setContext({ - headers: { - authorization: `Bearer ${localStorage.getItem('token')}`, - }, - }); - } - }, - }), +const client = new ApolloClient({ + uri: 'http://localhost:4444', + // cache: new InMemoryCache().restore(initialState || {}), + ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) + request: operation => { + console.log(operation); + if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) { + console.log(`Bearer ${localStorage.getItem('token')}`); + operation.setContext({ + headers: { + authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + } + }, }); +export { client }; + +export default withApollo({ client }); + // OPTION 2 // import { withData } from 'next-apollo'; |