GraphQL and serverless computing have quickly established themselves as key components for modern app and web development. Both technologies reduce the overhead required to develop applications, increase code efficiency, and reduce resource usage and backend infrastructure, enabling you to focus on building great frontend user experiences. 

This post explains how you can leverage GraphQL and serverless technologies to streamline your application development and improve the reliability and responsiveness of your products.

What is GraphQL?

GraphQL is a query language, designed for APIs, that you use to fetch data from your backend (sources like your own databases or other third-party services). GraphQL lets you describe your data and query it for the exact response you require: in each query you specify the exact fields you want returned, and you can even request data from across relationships. 

If you’re unfamiliar with GraphQL (and what exactly representing your data as a “graph” means), we've put together an article explaining GraphQL and how to use it.

How does GraphQL benefit developers and users?

GraphQL originated from the need for a "data-fetching API powerful enough to describe all of Facebook." This resulted in a query language that:

• Allows for expression of queries, objects, and relations as a graph, making complex data more easily describable.

• Enables efficient network transfer — a consequence of the query language’s expressiveness, where it is possible to request all (and only!) the data necessary for a given task with a single query.

• Uses a type system that defines what kinds of data a GraphQL API provides, enforcing good development practices.

This has practical advantages for frontend developers, allowing you to:

• Develop frontends faster using a single, standardized query language and developer tools built around it.

• Evolve your APIs without having to deal with versioning.

• Write queries that can be used in any programming language using language-agnostic type definitions.

• Consolidate data from multiple services into a single API call using schema stitching.

GraphQL standardizes the retrieval of data from multiple services in a structured, hierarchical manner. Due to its use of a single endpoint, it also improves the experience for end users: as there are fewer network requests, and only the data needed is transferred, applications are more responsive when interacting with backends and third-party services that implement GraphQL as an alternative to REST APIs.

Below, you can see an example GraphQL query that retrieves a collection of blogPost objects and their related author objects:

This GraphQL query only retrieves the title and content fields of the blogPost objects, as well as the name and bio of the author objects. Note that if this query were to be implemented using a REST API, you would usually have to use two requests — one to an endpoint to retrieve the data about the blog post, and a second to a separate endpoint to retrieve the author.

Why are REST APIs still so popular then?

REST APIs that split data retrieval between multiple endpoints for different data objects and purposes are still the default for many applications and third-party APIs — and they aren't going anywhere. In some cases, they are simply better for a specific task, but in others they are used to maintain compatibility, because they were built before GraphQL caught on with development communities, or because the developer is not yet familiar with GraphQL.

When planning a new application, you should carefully assess the benefits of implementing GraphQL or REST, and choose the technology that is best suited for your team, your use case, and your future planned functionality.

What is serverless?

“Serverless” is a bit of a misnomer: there are still servers involved in hosting and delivering your content (there have to be!), but you aren't involved in managing them. You just supply the code you want to run, and your service provider does the rest to ensure that it is executed by managing all infrastructure tasks from deployment to patching and scaling.

This is opposed to traditional web service hosting where you manage a whole virtual machine from the operating system up, and have to keep the operating system, database software, and application stack secure, maintained, and (most importantly) online for your end users.

Serverless applications are often used for the implementation of microservices-based applications, and many serverless providers like AWS Lambda and Cloudflare serve applications from locations geographically close to end users to ensure they get the best performance possible.

How does serverless computing benefit developers and users?

Serverless pushes aside much of the traditional server-side concerns and complexity, allowing developers to spend more time working on the unique logic that powers their products. This is particularly useful for full-stack and cross-functional developers looking to focus their efforts on providing exceptional user experiences by:

• Focusing on writing high quality code.

• Running code without provisioning servers or manually scaling.

• Reducing resource and cost concerns and mitigations against these — with serverless, you only pay based on how much your code is actually invoked.

• Removing the need for server administration.

• Removing the need for redundant systems to avoid downtime during updates and patching.

Below is an example serverless function for a Cloudflare Worker that returns a basic web page and message. This is the complete code; no infrastructure, web server configuration, or other application scaffolding is required.

Copy

To run this example, you can copy it into a file named index.js and upload it to Cloudflare Workers. While simple, this example shows how much effort developers can save by building on serverless platforms and reducing the amount of code they need to write.

Serverless and GraphQL queries are a powerful combination for frontend developers

Frontend developers developing websites and apps need to be able to focus on the user experience — not manually building API endpoints and infrastructure. The combination of building with serverless and implementing GraphQL for data retrieval provides a huge reduction in the resources and costs required to ideate, build, and launch a successful digital product.

Adopting these tools increases the flexibility of development too: while it may seem counterintuitive, offloading your infrastructure management allows you to more easily iterate and pivot your development process and products as the serverless paradigm encourages agile development practices. 

Many frontend developers are eschewing traditional, maintenance- and infrastructure-heavy solutions like WordPress and Drupal in favor of statically hosted frontend code that retrieves dynamic content via GraphQL from serverless functions. 

Some teams are taking this streamlining process a step further, completely removing the need for their own backend code by delivering the text, images, and other media for their blogs, apps, and ecommerce platforms using composable content retrieved using GraphQL.

Top serverless and GraphQL API tools and resources

Choosing the right tools to base your user experiences on is a vital step in the development process. It's worth taking the time to explore the frameworks and tools available to your team to expedite and streamline the development process.

If you are looking to utilize GraphQL and serverless in your own apps and websites, here are some resources to get you started.

GraphQL tools and resources

Alongside thorough documentation, the official GraphQL website provides an extensive and up-to-date list of libraries and tools for adding GraphQL capabilities to your projects, no matter what language or framework you are working with. 

To see an example, check out our GraphQL-powered blog built with Next.js and Contentful.

You can further optimize your development process and focus on the aspects of your application that are unique to it by further reducing the amount of in-house code you need to maintain. 

Some examples for common use cases:

• Auth0 is an authentication system that you can use to secure your GraphQL endpoints, removing the need to write your own authentication code.

• Saleor is a headless ecommerce platform for managing products and transactions that supports GraphQL.

• Contentful provides a headless content management platform that lets you build your own frontends that deliver content modeled to your own specification via GraphQL.

Serverless hosting platforms and tutorials

Below is a list of the most popular serverless platforms, and resources for each to get you started. Most of these platforms come with their own set of command-line tools that can be used to manage and deploy your serverless apps.

Managed database solutions also reduce your infrastructure. AWS, DigitalOcean, Azure, and Google Cloud all provide managed database products (including MySQL, PostgreSQL, and MongoDB) that can be connected with their serverless functions.

Serverless and GraphQL have changed frontend development for the better

GraphQL and serverless have become key technologies for developers who want to be able to rapidly respond to new trends with focused iterable codebases. Both technologies address real problems developers are facing as the SaaS and PaaS ecosystems continue to grow in both use cases and audience over recent years.

By unifying your data with GraphQL, and supporting your code with serverless infrastructure, you can ensure that your development team is using its talents on building best-in-class products and responding to your audience's needs and expectations.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.