Add onResetStore method to client to register callbacks after resetStore

[peggyrayzis]

Adding this functionality will allow us to register a callback to write defaults to the store after client.resetStore for apollo-link-state, fixing this issue.

[apollo-cla]

	Messages
📖	Please add your name and email to the AUTHORS file (optional)

Generated by 🚫 dangerJS

[jbaxleyiii]

@peggyrayzis awesome! Do we have plans to document this? Would you be able to open a docs PR / issue or want to add it here?

[peggyrayzis]

@jbaxleyiii just added docs for client.onResetStore & the new method to the API reference section! client.resetStore wasn't documented either (aside from the authentication recipe), so I added docs for that one too.

[ShockiTV]

This should be part of client init options, as it is no action, just configuration

const client = new ApolloClient({
  cache,
  link: stateLink,
  onResetStore: stateLink.writeDefaults,
});

And it can be used to also do persistor.purge(); for time being :-D

[peggyrayzis]

@ShockiTV If it's part of the configuration, you'll only be able to register one callback (or an array if we change it) at initialization. There could be some scenarios where you would want to register a callback dynamically within a component, so I think it makes sense to leave it as a method.

[ShockiTV]

@peggyrayzis It is 1 callback and you can provide your own function to put 20 side effects to it with custom branching so no array needed ofc.
But I suggest adding it as init option too so you can set it right from the start to the right callback. Not after it was instantiated.

[ShockiTV]

Also the push behaviour feels strange when there is no way how to unregister the hooked promise.

Just 1 callback is enough and developer can manage to put 10 effects in async function.
It is more straightforward than proposed way of adding 10 callbacks and than managing horde of if switches to do nothing in each of them when every 1 of them have to be executed each time.

Not mentioning that promise.all behaviour when 1 of them .reject

[jbaxleyiii]

@ShockiTV I do think we need to have a way to unregister callbacks, but the benefit of the array vs a single method is the easy of keeping the listeners close to what they would be used for.

For instance, two immediate use cases for this callback are to rewrite to the cache after resetStore (for apollo-link-state) and to force rerender your UI (or portions of it) after a store reset. If you have it as a method with callbacks, then you can do something like this:

import { withApollo } from "react-apollo";

export class Foo extends Component {
  constructor(props) {
    super(props);
    this.unsubscribe = props.client.onResetStore(
      () => this.setState({ reset: false }
    );
    this.state = { reset: false }
  }
  componentDidUnmount(){
    this.unsubscribe()
  }
  render(){
    return this.state.reset ? <div /> : <span />
  }
}

export default withApollo(Foo);

This does show where we need an unsubscribe hook so it can be cleaned up though