diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/Nav.js | 10 | ||||
| -rw-r--r-- | frontend/components/Signin.js | 2 | ||||
| -rw-r--r-- | frontend/components/Signup.js | 1 | ||||
| -rw-r--r-- | frontend/lib/withData.js | 10 | ||||
| -rw-r--r-- | frontend/package-lock.json | 5 | ||||
| -rw-r--r-- | frontend/package.json | 1 | ||||
| -rw-r--r-- | frontend/pages/_app.js | 19 |
7 files changed, 36 insertions, 12 deletions
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js index a90568c..4bbce2d 100644 --- a/frontend/components/Nav.js +++ b/frontend/components/Nav.js @@ -4,14 +4,18 @@ import { Query, ApolloConsumer } from 'react-apollo'; import { CURRENT_USER_QUERY } from '../queries/queries.graphql'; import CartCount from './CartCount'; import Signout from './Signout'; - +import Dump from './Dump'; import NavStyles from './styles/NavStyles'; class Nav extends React.Component { render() { + // below we set the fetchPolicy to network only so it forces re-fetch on the server return ( - <Query query={CURRENT_USER_QUERY}> - {({ data: { me } }) => ( + <Query + query={CURRENT_USER_QUERY} + fetchPolicy={process.browser ? 'cache-first' : 'network-only'} + > + {({ data: { me }, loading, error }) => ( <NavStyles data-test="nav"> <Link href="/items"> <a>Shop</a> diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js index 7a4db8c..9e25cf1 100644 --- a/frontend/components/Signin.js +++ b/frontend/components/Signin.js @@ -28,7 +28,7 @@ class Signin extends Component { {client => ( <Mutation mutation={SIGNIN_MUTATION} variables={this.state}> {(signin, { loading, error }) => ( - <Form onSubmit={e => this.loginUser(e, signin, client)}> + <Form method="post" onSubmit={e => this.loginUser(e, signin, client)}> <Error error={error} /> <fieldset disabled={loading} aria-busy={loading}> <label htmlFor="email"> diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js index 22a729f..ef622ed 100644 --- a/frontend/components/Signup.js +++ b/frontend/components/Signup.js @@ -23,6 +23,7 @@ class Signup extends Component { <Mutation mutation={SIGNUP_MUTATION} variables={this.state}> {(signup, { loading, error }) => ( <Form + method="post" onSubmit={async e => { e.preventDefault(); const res = await signup(); diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js index 0696333..9bd22f0 100644 --- a/frontend/lib/withData.js +++ b/frontend/lib/withData.js @@ -5,16 +5,22 @@ import { LOCAL_STATE_QUERY } from '../queries/queries.graphql'; const client = new ApolloClient({ uri: process.env.NODE_ENV === 'development' ? 'http://localhost:4444' : 'http://localhost:4444', - ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) + // ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) // TODO this is a bug: https://github.com/apollographql/apollo-client/issues/3265 fetchOptions: { credentials: 'include', }, - request: async operation => { + request: async (operation, forward) => { operation.setContext({ fetchOptions: { credentials: 'include', }, + headers: { + haha: `lol${Date.now()}`, + cookie: '', + // TODO: This cookie needs to come from the SSR + // cookie:'token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjamY0ZWtqcm55ZGQ0MDkxNnhweXEweGVqIiwiaWF0IjoxNTI2NDc4NzY2fQ.LJbLhKZ6j5d3ntDvaBR4V-4rFEPv_pzJiIhZ84WkO6A', + }, }); }, clientState: { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fe9b67b..abbd69a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -2725,6 +2725,11 @@ "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz", "integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=" }, + "cookie": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", + "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" + }, "copy-concurrently": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index b8afed3..153f435 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "apollo-boost": "^0.1.6", "apollo-client": "^2.3.1", "babel-plugin-styled-components": "^1.5.1", + "cookie": "^0.3.1", "date-fns": "^2.0.0-alpha.7", "downshift": "^1.31.14", "graphql": "^0.13.2", diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js index 8857120..742532f 100644 --- a/frontend/pages/_app.js +++ b/frontend/pages/_app.js @@ -3,19 +3,26 @@ import { ApolloProvider } from 'react-apollo'; import withData from '../lib/withData'; import { CURRENT_USER_QUERY } from '../queries/queries.graphql'; import Page from '../components/Page'; +import cookie from 'cookie'; // Next.js wraps each Page in an <App></App> component. This is handy for when you want to persist anything from page to page, or just access a component that is 1 level higher than each page. // here we use App from next/app and wrap it with withData so we can get Apollo and SSR class MyApp extends App { - componentDidMount() { - if (typeof window !== 'undefined' && !window.__CLIENTLOADED__) { - this.props.apollo.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); - window.__CLIENTLOADED__ = true; - } - } + // componentDidMount() { + // if (typeof window !== 'undefined' && !window.__CLIENTLOADED__) { + // this.props.apollo.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); + // window.__CLIENTLOADED__ = true; + // } + // } static async getInitialProps({ Component, ctx }) { + if (!process.browser && ctx.req.headers.cookie) { + // if we are SSR, pass along the cookie to apollo + console.log('On the server'); + const cookies = cookie.parse(ctx.req.headers.cookie); + console.log(cookies.token); + } let pageProps = {}; if (Component.getInitialProps) { |