diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index c20d8f247..d2c16f48a 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -1,29 +1,115 @@ -import React from "react"; +import React, { Component } from "react"; import { Mutation, Query } from "react-apollo"; import { GET_CURRENT_USER, SET_CURRENT_USER } from "../graphql/local.queries"; import App from "./App"; import Spin from "../components/loading-spinner/loading-spinner.component"; -export default () => { - return ( - - {({ loading, error, data: { currentUser } }) => { - if (loading) return ; - if (error) return error.message; - return ( - - {setCurrentUser => ( - { - setCurrentUser({ variables: { user } }); - }} - /> - )} - - ); - }} - - ); -}; +import ApolloClient from "apollo-client"; +import { InMemoryCache } from "apollo-cache-inmemory"; +import { HttpLink } from "apollo-link-http"; +import { setContext } from "apollo-link-context"; +import { resolvers, typeDefs } from "../graphql/resolvers"; +import apolloLogger from "apollo-link-logger"; +import { ApolloLink } from "apollo-boost"; +import { ApolloProvider } from "react-apollo"; +import { persistCache } from "apollo-cache-persist"; +import initialState from "../graphql/initial-state"; + +class AppContainer extends Component { + state = { + client: null, + loaded: false + }; + async componentDidMount() { + const httpLink = new HttpLink({ + uri: process.env.REACT_APP_GRAPHQL_ENDPOINT + }); + + const authLink = setContext((_, { headers }) => { + // get the authentication token from local storage if it exists + const token = localStorage.getItem("token"); + // return the headers to the context so httpLink can read them + if (token) { + return { + headers: { + ...headers, + authorization: token ? `Bearer ${token}` : "" + } + }; + } else { + return { headers }; + } + }); + + const middlewares = []; + if (process.env.NODE_ENV === "development") { + middlewares.push(apolloLogger); + } + middlewares.push(authLink.concat(httpLink)); + + const cache = new InMemoryCache({ addTypename: false }); + + const client = new ApolloClient({ + link: ApolloLink.from(middlewares), + cache, + typeDefs, + resolvers + }); + + client.writeData({ + data: { + ...initialState + } + }); + + try { + // See above for additional options, including other storage providers. + await persistCache({ + cache, + storage: window.localStorage + }); + } catch (error) { + console.error("Error restoring Apollo cache", error); + } + + this.setState({ + client, + loaded: true + }); + + //Init local state. + } + + render() { + const { client, loaded } = this.state; + + if (!loaded) { + return
Loading...
; + } + return ( + + + {({ loading, error, data: { currentUser } }) => { + if (loading) return ; + if (error) return error.message; + return ( + + {setCurrentUser => ( + { + setCurrentUser({ variables: { user } }); + }} + /> + )} + + ); + }} + + + ); + } +} + +export default AppContainer; diff --git a/client/src/App/App.js b/client/src/App/App.js index 7f38a85b6..a7590d787 100644 --- a/client/src/App/App.js +++ b/client/src/App/App.js @@ -74,6 +74,7 @@ class App extends React.Component { } render() { + console.log("this.props.currentUser", this.props.currentUser); return (
diff --git a/client/src/index.js b/client/src/index.js index 4de187462..327cc1614 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -7,25 +7,12 @@ import * as serviceWorker from "./serviceWorker"; import "./index.css"; import AppContainer from "./App/App.container"; -import { ApolloProvider } from "react-apollo"; -import { client } from "./graphql/client"; -import initialState from "./graphql/initial-state"; - require("dotenv").config(); -//Init local state. -client.writeData({ - data: { - ...initialState - } -}); - ReactDOM.render( - - - - - , + + + , document.getElementById("root") ); diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx index f94a4ee73..197c2d6f1 100644 --- a/client/src/pages/manage/manage.page.jsx +++ b/client/src/pages/manage/manage.page.jsx @@ -11,6 +11,9 @@ export default function Manage({match}) { return (
+ + +
) } diff --git a/package.json b/package.json index 63149dab0..36cff93ff 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build" }, "dependencies": { + "apollo-cache-persist": "^0.1.1", "body-parser": "^1.18.3", "compression": "1.7.4", "cors": "2.8.5", diff --git a/yarn.lock b/yarn.lock index c7d283b17..a119c111f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -272,6 +272,11 @@ anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" +apollo-cache-persist@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/apollo-cache-persist/-/apollo-cache-persist-0.1.1.tgz#e6cfe1983b998982a679aaf05241d3ed395edb1e" + integrity sha512-/7GAyblPR169ryW3ugbtHqiU0UGkhIt10NeaO2gn2ClxjLHF/nIkJD5mx/0OCF2vLNbbnzLZVDeIO1pf72TrEA== + archiver-utils@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-2.1.0.tgz#e8a460e94b693c3e3da182a098ca6285ba9249e2"