Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add customCache to config #13

Merged
merged 1 commit into from
Mar 17, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,41 @@ Next-apollo integrates Apollo seamlessly with Next by wrapping our pages inside

On initial page load, while on the server and inside `getInitialProps`, the Apollo method, `getDataFromTree`, is invoked and returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.

## Beware Of Cache
## Custom Cache

SSR will cease to function if you pass in your own Cache. It is highly suggested that you do not pass in your own Cache in the config unless you want it to drop the SSR functionality.
SSR will cease to function if you pass in your own Cache.
It is highly suggested that you do not pass in your own Cache in
the config unless you want it to drop the SSR functionality.

Instead, to use a custom cache, pass in a `createCache` function.
For example, to use a cache with [fragment matching],

```jsx
import { withData } from 'next-apollo'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'

import introspectionQueryResultData from './fragmentTypes'

const createCache = () => {
const fragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData
})

return new InMemoryCache({fragmentMatcher})
}

const config = {
link: new HttpLink({
uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn'
}),
createCache
}

export default withData(config)
```

[fragment matching]: https://www.apollographql.com/docs/react/recipes/fragment-matching.html

## Authentication

Expand Down
14 changes: 11 additions & 3 deletions src/initApollo.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,21 @@ if (!process.browser) {
global.fetch = fetch
}

const createDefaultCache = () => new InMemoryCache()

function create(apolloConfig, initialState) {
return new ApolloClient({
const createCache = apolloConfig.createCache || createDefaultCache

const config = {
connectToDevTools: process.browser,
ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
cache: new InMemoryCache().restore(initialState || {}),
cache: createCache().restore(initialState || {}),
...apolloConfig
})
}

delete config.createCache

return new ApolloClient(config)
}

export default function initApollo(apolloConfig, initialState, headers) {
Expand Down