diff options
Diffstat (limited to 'frontend/lib')
| -rw-r--r-- | frontend/lib/initApollo-OLD.js | 92 | ||||
| -rw-r--r-- | frontend/lib/initApollo.js | 76 | ||||
| -rw-r--r-- | frontend/lib/withData.js | 6 |
3 files changed, 106 insertions, 68 deletions
diff --git a/frontend/lib/initApollo-OLD.js b/frontend/lib/initApollo-OLD.js new file mode 100644 index 0000000..e86c7e1 --- /dev/null +++ b/frontend/lib/initApollo-OLD.js @@ -0,0 +1,92 @@ +import { ApolloClient } from 'apollo-client'; +import { ApolloLink, from } from 'apollo-link'; +import { HttpLink } from 'apollo-link-http'; +import { InMemoryCache } from 'apollo-cache-inmemory'; +import fetch from 'isomorphic-fetch'; +import { withClientState } from 'apollo-link-state'; +import { endpoint } from '../config'; + +let apolloClient = null; + +// Polyfill fetch() on the server (used by apollo-client) +if (!process.browser) { + global.fetch = fetch; +} + +function create(initialState) { + // Create a new Cache + const cache = new InMemoryCache().restore(initialState || {}); + // First we create three peices of middleware + const stateLink = withClientState({ + cache, + defaults: { + uiData: { + __typename: 'UIData', + isConnected: true, + isCartOpen: false, + }, + }, + resolvers: { + Mutation: { + setLocalData: (_, values, { cache }) => { + const data = { + uiData: { + __typename: 'UIData', + ...values, + }, + }; + cache.writeData({ data }); + return null; + }, + }, + }, + }); + + // 1. Create a link for local state to be managed in Apollo + + // 2. connect to our GraphQL API + const httpLink = new HttpLink({ + uri: endpoint, // Server URL (must be absolute) + opts: { + credentials: 'same-origin', + }, + }); + + // 3. One to tack on our auth token on each request + const authMiddleware = new ApolloLink((operation, forward) => { + const headers = {}; + + if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) { + headers.authorization = `Bearer ${localStorage.getItem('token')}`; + } + + operation.setContext({ headers }); + return forward(operation); + }); + + return new ApolloClient({ + connectToDevTools: process.browser, + ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) + link: from([stateLink, authMiddleware, httpLink]), + cache, + defaultOptions: { + query: { errorPolicy: 'all' }, + mutate: { errorPolicy: 'all' }, + }, + }); +} + +export default function initApollo(initialState) { + // Make sure to create a new client for every server-side request so that data + // isn't shared between connections (which would be bad) + if (!process.browser) { + return create(initialState); + } + + // Reuse client on the client-side + if (!apolloClient) { + apolloClient = create(initialState); + } + + return apolloClient; +} diff --git a/frontend/lib/initApollo.js b/frontend/lib/initApollo.js index e86c7e1..f8a363b 100644 --- a/frontend/lib/initApollo.js +++ b/frontend/lib/initApollo.js @@ -1,77 +1,25 @@ -import { ApolloClient } from 'apollo-client'; -import { ApolloLink, from } from 'apollo-link'; -import { HttpLink } from 'apollo-link-http'; -import { InMemoryCache } from 'apollo-cache-inmemory'; +import ApolloClient from 'apollo-boost'; import fetch from 'isomorphic-fetch'; -import { withClientState } from 'apollo-link-state'; import { endpoint } from '../config'; -let apolloClient = null; - // Polyfill fetch() on the server (used by apollo-client) if (!process.browser) { global.fetch = fetch; } -function create(initialState) { - // Create a new Cache - const cache = new InMemoryCache().restore(initialState || {}); - // First we create three peices of middleware - const stateLink = withClientState({ - cache, - defaults: { - uiData: { - __typename: 'UIData', - isConnected: true, - isCartOpen: false, - }, - }, - resolvers: { - Mutation: { - setLocalData: (_, values, { cache }) => { - const data = { - uiData: { - __typename: 'UIData', - ...values, - }, - }; - cache.writeData({ data }); - return null; - }, - }, - }, - }); - - // 1. Create a link for local state to be managed in Apollo - - // 2. connect to our GraphQL API - const httpLink = new HttpLink({ - uri: endpoint, // Server URL (must be absolute) - opts: { - credentials: 'same-origin', - }, - }); - - // 3. One to tack on our auth token on each request - const authMiddleware = new ApolloLink((operation, forward) => { - const headers = {}; - - if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) { - headers.authorization = `Bearer ${localStorage.getItem('token')}`; - } - - operation.setContext({ headers }); - return forward(operation); - }); +let apolloClient = null; +function create(initialState) { return new ApolloClient({ - connectToDevTools: process.browser, - ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) - link: from([stateLink, authMiddleware, httpLink]), - cache, - defaultOptions: { - query: { errorPolicy: 'all' }, - mutate: { errorPolicy: 'all' }, + uri: endpoint, + request: operation => { + if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) { + operation.setContext({ + headers: { + authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + } }, }); } diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js index 0c68f49..b784653 100644 --- a/frontend/lib/withData.js +++ b/frontend/lib/withData.js @@ -12,6 +12,7 @@ function getComponentDisplayName(Component) { export default ComposedComponent => class WithData extends React.Component { static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`; + static propTypes = { serverState: PropTypes.object.isRequired, }; @@ -61,10 +62,7 @@ export default ComposedComponent => }; } - constructor(props) { - super(props); - this.apollo = initApollo(this.props.serverState.apollo.data); - } + apollo = initApollo(this.props.serverState.apollo.data); render() { return ( |