apollo client: local state being overwritten by query? - reactjs

Question

I have an app that uses:
react-apollo
apollo-link-state
apollo-cache-persist
apollo-link-error
I ran into a weird issue when I was trying to add a pollInterval to a query. The pollInterval causes an overWrite of the local cache state back to the defaults. I am not sure if this is caused directly by the pollInterval or not, but I have been troubleshooting the issue for some time with no luck.
I made a reproduction of the issue on Github here (https://github.com/deltaskelta/apollo-link-iss-573) with instructions on how to see what is happening. If anyone has any idea what is going on I would really appreciate it!
Thanks
EDIT: the full code that is causing the error is posted below
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { ApolloProvider, graphql } from "react-apollo";
import { CachePersistor } from "apollo-cache-persist";
import { InMemoryCache } from "apollo-cache-inmemory";
import { onError } from "apollo-link-error";
import { withClientState } from "apollo-link-state";
import PropTypes from "prop-types";
import React, { Component } from "react";
import gql from "graphql-tag";
export const resolvers = {
Mutation: {
setErrors: (_, { messages }, { cache }) => {
const data = {
errors: {
__typename: "Errors",
messages
}
};
cache.writeData({ data });
return null;
}
}
};
// create the cache
const cache = new InMemoryCache();
const persistor = new CachePersistor({
cache,
storage: window.localStorage,
debug: true
});
// link to the local state cache
const stateLink = withClientState({
cache,
resolvers,
defaults: {
errors: {
__typename: "Errors",
messages: []
}
}
});
// link to intercept graphql errors and write them to the cache, this is almost like a
// middleware
const errorLink = onError(({ graphQLErrors, networkError }) => {
var messages = []; // make a place to push all errors to
// go through the network errors and graphql errors, push them to the errors array and
// then write those errors to the cache
if (graphQLErrors) {
graphQLErrors.forEach(({ message, path }) => {
messages.push(`Error: msg: ${message}, path: ${path}`);
});
}
if (networkError) {
messages.push(`Error: network: ${networkError}`);
}
const data = {
errors: {
__typename: "Errors",
messages
}
};
cache.writeData({ data });
});
// put both links in the frontend apollo client
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, errorLink]),
connectToDevTools: true
});
client.onResetStore(stateLink.writeDefaults);
class Persistor extends React.Component {
static propTypes = {
children: PropTypes.object,
persistor: PropTypes.object
};
componentDidMount() {
this.props.persistor.restore().then(() => {
console.log("restored");
});
}
render() {
return this.props.children;
}
}
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<Persistor persistor={persistor}>
<Errors />
</Persistor>
</ApolloProvider>
);
}
}
const RootComponent = ({ errors }) => {
return (
<div>
Hello World
{errors.map(e => <div>{e}</div>)}
</div>
);
};
RootComponent.propTypes = {
errors: PropTypes.array
};
const Errors = graphql(
gql`
query GetErrors {
errors #client {
messages
}
}
`,
{
props: ({ data }) => ({ errors: data.errors.messages }),
options: {
pollInterval: 1000 * 10
}
}
)(RootComponent);
export default App;
// TODO:
//
// - cause an error that is written to the cache
// - make a query to poll the error