Learning Apollo through React Starter Kit

#node #ssr #react #apollo

Apollo toolset is pretty fascinating these days. It's a relatively big project based on GraphQL spec, that is because the Apollo development team provides many separated modules for user's incremental adoption, instead of so-called a full-stack monolith framework. The benefits are huge.

However, because it's kind of hard to get the whole picture of Apollo and how each module relates, especially when you assume server-side rendering (SSR) with it, we've gotta have a good example project. Here, this one would be your option.

👉 react-starter-kit:feature/apollo-pure

It includes:

apollo-client and react-apollo
apollo-link-state for client-side state management
apollo-server to serve GraphQL API
SSR with fluent data passing from server to client

React Starter Kit (RSK) is a React+Express based SSR boilerplate of web development. It's not only a highly capable template for a general web service but also a concrete educational material of modern frontend development. Especially these lines in server.js are beautiful as I've read a hundred times. It's like a crystal of how web development evolves. Thus I trust RSK and pushed an Apollo example upon it.

There already was an apollo feature branch by @langpavel from which I've learned a lot. The main difference between these is that mine doesn't include Redux code, being replaced by apollo-link-state. Further, the feature/apollo-pure uses apollo-server so that you will grasp an overhead view from frontend to the backend of an Apollo project.

One challenge for me this time is to design a comfortable/easy-to-understand placement of a state role directory. Although Apollo provides a well-considered way to transparently access to both client-side state and remote data through GraphQL syntax, these are different for some reasons. So I separate these in src/data (concerning feature/apollo by @langpavel) and src/state which all client state and its resolvers go to.

As always, thank you for reading this, and I'll appreciate more if you review the branch and make a comment on this PR. I may miss some necessary functionalities of Apollo in it. I'd like to make it a real Apollo boilerplate. Please tell me what it is. Thanks👍