You don’t need a fancy framework to use GraphQL with React

All you need is a good naming strategy

React offers a great language to declaratively describe User Interfaces (web or otherwise) and GraphQL offers a great language to declaratively describe data requirements. React gives us composability with its components and GraphQL gives us composability with its fragments. These two similarities allow for a great match between React and GraphQL (a match made in Facebook).

In this article, I’ll walk you through a simple example to connect a blog app written in React with a GraphQL API without using any frameworks like Relay or Apollo.

Those frameworks exist for very good reasons. Here are a few generic things such frameworks try to do (not a complete list):

• Performance. For example, batching multiple network requests into one and displaying a big list of records without overwhelming the app memory through the use of pagination.
• Efficiency. For example, asking servers for only the new data required and then merging new data with old data, or asking servers for only the data used in the visible window and asking for the rest of the data after that.
• Dealing with failure. For example, employing a standard error handling for failing requests and a standard retry strategy for them.
• Responsiveness. For example, showing expected data changes optimistically while waiting on a confirmation from the server. Then possibly performing a rollback on those optimistic changes if the server fails to persist the data.
• Cache management. For example, deciding what to cache, where to cache it, and when to expire something in the cache.

Obviously, if you need all of these features and strengths, you need to either use a framework or reinvent a wheel. If you think you don’t need these features, you’re probably not thinking far enough into the future.

But sometimes using a framework is not an option. Sometimes a framework has a lot more features than what you’re after and sometimes introducing a framework means massive changes to existing structures. Frameworks usually decrease the flexibility you have with your code. This last point can be both a blessing…