GraphQL is a powerful solution for many users. Having the ability to determine the data returned and the format it’s returned great makes for a robust system, delivering excellent user experience and unmatchable data exchange. That said, GraphQL is not entirely perfect out of the box.

Thus, GraphQL frameworks have arisen to try and fill perceived gaps in the current GraphQL functionality. Today, we’re going to look at a handful of GraphQL libraries and frameworks, and identify what makes them unique in the broader market.

This is not meant to be an exhaustive list, either in breadth or in depth. Our purpose is merely to showcase the wide variety of tools on offer for GraphQL adopters.

FlacheQL

FlacheQL is a fast, flexible, and lightweight client-side caching solution. In essence, it’s designed to allow developers to deliver two distinct caching experiences. The first, complete cache retrieval, is the classic caching experience. All requests in FlacheQL are passed through the cache, and as such, previously completed queries can be passed along without having to duplicate the content.

The big thing with FlacheQL, however, is that it allows developers to reply with partial cache retrieval as well. When a request is made, if part of that request has been part of another request previously completed, developers can opt to serve only that part of the cached request, completing the rest of the query to fill in the blanks.

Pros

• Incomplete cache retrieval is a unique feature that is pretty rare in the GraphQL world. This saves a ton of data and processing over time, and its impact on effective cache approaches cannot be understated.
• FlacheQL is rather lightweight and fast, which is an absolute requirement for such a system.

Cons

• Not all APIs need caching, and in many cases, this cached content approach, especially when utilizing partial caching, can do more harm than good (such as when API state must be called for medical devices).
• No matter how lightweight it is, it’s still another framework to concern yourself with – if caching is a wishlist item, not a demand, then native HTTP caching built into GraphQL may be “enough.”

Installation

FlachQL can be installed using the following code:

import Flache from 'flacheql'
const endpoint = 'https://.com/graphql';
const yourCache = new Flache(endpoint);

Relay

Probably the most famous of frameworks on this list, Relay is often considered as a solution in the same breath as anything GraphQL. It’s a highly general-purpose framework for application development. While this means that while it’s more a jack of all trades solution than anything else, it also has much higher compatibility than most anything in the GraphQL world. With a highly declarative query pattern, built-in caching, and state-server synchronization, Relay is a generalist approach to most demands in GraphQL.

Pros

• Long-term utilization has made Relay heavily tested and proven. This also means that if an issue does arise, there is likely documentation as to what fixed the problem, and what was required for the user to implement said fix.
• Relay is compatible with other solutions in the GraphQL space, making its integration seamless and mostly trouble-free.

Cons

• For many, Relay seeks to fix problems that arise out of misunderstanding core REST tenants – if this is the case for implementation, adopting Relay is a bandaid over a more significant issue and doesn’t solve the underlying architectural and understanding issues causing the demand in the first place.

Installation

Relay can be installed using the following code:

yarn add react react-dom react-relay

yarn add --dev babel-plugin-relay graphql

{
  "plugins": [
    "relay"
  ]
}

Apollo

Apollo is chiefly a full-stack solution, but due to the nature of its design, either the server, the client, or a joint server-client codebase can be used. It supports major framework integrations, and is somewhat of a generalist approach, much like Relay. That being said, it does require significantly more libraries than other frameworks on this list. That, in addition to the “good but not perfect” caching methodology (which sometimes requires manual updating), makes Apollo a specific solution to specific problems rather than a fix-all implementation.

Pros

• Apollo is very modular, allowing either the server code, the client code, or both codebases to be used in isolation or tandem. This makes Apollo a lot more free in a development sense versus other frameworks, even when considering those on this very list.
• Apollo is a generalist in a world of specialist API frameworks – like Relay, this makes its value proposition stronger against more specific API implementation frameworks.

Cons

• Apollo requires more libraries to do its core functionality than other frameworks mentioned herein, and as such, if that’s a problem for an API environment, Apollo quickly becomes a non-consideration.
• Caching is ok, but not great – it sometimes requires manual updating, and in some situations, that’s a dealbreaker.

Installation

Apollo can be installed using the following code. First, you need to start the server function:

cd start/server && npm install

Next, you can create the actual Apollo server and begin building the defined schemas.

const { ApolloServer } = require('apollo-server'); const typeDefs = require('./schema'); const server = new ApolloServer({ typeDefs });

Graphcool

Graphcool is an open-source, server-side framework that is specifically designed to separate the business logic from stateful components. This allows for a greater level of control over individual resources and the paths those resources prioritize while obfuscating parts that either facilitate or don’t directly interact with client requests. While this seems like a small division to many, the separation of logic from core functionality is relatively important and allows for a more distributed system to provide the same continuity of function expected in standard architectural designs.

Pros

• Graphcool provides ample templates to work from, meaning that you can get going quite fast. That speed is also mirrored in the actual building scheme as well – GraphCool is rather fast in doing what it does.
• Graphcool has an excellent filtration methodology, and when combined with excellent integrated sorting and pagination, this leads to getting highly specific output, even by GraphQL standards.

Cons

• The content schema generated by GraphCool is highly specific, and there’s no distinct relations noted between schema elements. This means there’s no cascade deletion option, either.
• Since GraphCool has only recently become open-source, its documentation is very lacking – this is significant enough to be a common complaint amongst most who review the framework.

Installation

GraphCool can be installed using the following code:

graphcool init     # bootstrap new Graphcool service
graphcool local up # start local cluster
graphcool deploy   # deploy to local cluster

Spikenail

Spikenail is Relay compatible and is natively supportive of GraphQL functionality. It tends to focus most heavily on access control and provides control through nested relations, custom scopes, and dynamic roles. Its schema options are all quite advanced, allowing for virtual fields and custom resolvers to control schema in an agile, functional way. By design, Spikenail is also meant to be adjustable, allowing the user to override any part of the framework for a genuinely customizable solution.

Pros

• Highly effective access control, supporting complex relations, scopes, and roles.

Cons

• Everything is handled via highly customizable middlewares. While this is a huge benefit, it also means that out of the box Spikenail is customized for “everything”, and as such, needs to be changed and molded to what you want it to be.

Installation

Spikenail can be installed using the following code:

npm install -g generator-spikenail
yo spikenail

Vulcan

Vulcan is, in essence, a full-stack solution that combines React and GraphQL in Meteor. While this has the obvious benefit of delivering on that functionality within Meteor, it does have the significant caveat that you’re essentially making the design choice to stick with Meteor. Due to that, don’t adopt Vulcan unless you want to stick with that option, as changing later down the road will be expensive, time-consuming, and complex.

Pros

• A complete, full-stack solution.

Cons

• Requires “buy-in” for the Meteor environment, and as such, is not a great choice for implementations outside of this relatively limited field.

Installation

Vulcan can be installed using the following code:

npm install
npm start

Conclusion

This list is only meant to be an introduction to many of these frameworks. That being said, this list does begin to paint a picture of what the GraphQL landscape has to offer, and what frameworks can be utilized to leverage code provisions for better caching, extensible functionality, and more.

What is your favorite framework? Let us know in the comments below!