Daniel K.
Daniel K.
Mar 15, 2018 · 2 min read

Perhaps I got rather lazy because I’ve been using MobX for a past year or so. I am failing to see a real value in this. I mean it’s surely nice to have a single way of handling state no matter of its origin, but that boilerplate that comes with it is rather mind-boggling. Don’t get me wrong, I love GraphQL and don’t ever want to touch any REST again, but this is just too much.

Let me do some comparison. This is an example from an article by James Munro. I think it would be better to cover the article which shows where this approach might shine instead of picking the simplest use case of all and over-engineer it.

const stateLink = withClientState({
cache,
resolvers: {
Mutation: {
incrementCounter: (_, args, { cache }) => {
const { counter } = cache.readQuery({
query: gql`
{
counter {
value
}
}
`
});

const data = {
counter: {
__typename: "Counter",
value: counter.value + 1
}
};

cache.writeData({ data });

return null;
}
}
},
defaults: {
counter: {
__typename: "Counter",
value: 1
}
}
});
Image for post
Image for post
Photo by Nick Fewings on Unsplash

Really? And that’s just resolver part, not the actual call for a change. That example could be more or less compared to action + reducer from Redux and even that would be way shorter and easier to read. With MobX (or rather with MST) all I have to do is this. I have a default value as a part of model, it’s easy to read and understand what it actually does just by looking at it once.

const Counter = types.model({
value: 1
})
.actions(self => ({
increment(inc = 1) {
self.value += inc
}
}))

To actually mutate that state with Apollo State it looks like this.

const IncrementButton = graphql(gql`
mutation incrementCounter {
incrementCounter @client
}
`)(
class extends Component {
onIncrementPressed = () => {
this.props.mutate({});
};

render() {
return <Button title="Increment" onPress={this.onIncrementPressed} />;
}
}
);

This is not too shabby for sure. It might even get better with render prop components for executing mutation, but still a bit verbose considering what it does. Comparison to MobX once again.

const IncrementButton = inject('counter')(({ counter })=> (
<Button title="Increment" onPress={counter.increment} />
))

And that’s it. Yes, I haven’t even used a class here because … why? The action is already bound and it generally reads so much better. See this article if you are interested in this more.

I don’t know. I love what has Apollo done for GraphQL and I am very grateful for it, but this approach just feels bad and I don’t understand why are people so excited about it. I am either missing out something here or it’s some strange bandwagon everyone is hopping onto for some reason :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store