GraphQL on Cloud Functions for Firebase
💻 Hassle-free GraphQL on FaaS
GraphQL is a query language that allows clients to specify which data they want to fetch while the GraphQL server exposes what is available and how it should be fetched. Combined with Cloud Functions we can deploy a serverless, auto-scaling GraphQL API to the cloud in seconds!
GraphQL in a Nutshell
The key to GraphQL is that it is Client and Server side. The Client specifies a query which defines the exact data they need, and the Server will fetch this data and return it in the structure the client specified. No over-fetching of data, no new endpoints for new data, no versioning.
A GraphQL server is NOT a database. Facebook built it to serve their existing data, which is why the server has the concept of a resolver (it resolves the data from an existing source) which you will see later. This isn’t intended as an overview of GraphQL itself, so see the documentation, Lee Byron’s blog post for its use within Facebook or this Apollo post.
Why use GraphQL with Cloud Functions
Your API needs to be hosted on a web server somewhere. Managing and scaling the infrastructure as your load changes over time can become complex. Cloud Functions allow us to host our API with an auto-scaling environment that scales based upon requests load. Exactly what we need.
Implementation
This is a simple example. The idea is to convey how easy it is to host GraphQL on Cloud Functions, not dive into the complexities of GraphQL itself.
Express.js makes it easy for us to host our API on an HTTP Cloud Function (read Express.js on Cloud Functions for Firebase for more detail on how this works so nicely).
Using the apollo-server-express module we create a GraphQL server, passing it our resolvers and schema, enabling cors and toggling on the playground for development testing. We then apply it as middleware to our Express app, which we pass to firebase-functions onRequest() handler.
Our schema and resolvers are mirrors of one another. The schema defines the GraphQL types within our graph using the GraphQL language. The resolvers define how each type in the schema is fulfilled through a JavaScript object with the same keys as there are schema types. The resolver is where you would fetch data from your existing database or external sources to serve in your graph (we’re hard-coding the response in this example here).
Testing
Once deployed to a Firebase project (follow the full example linked below) you can load the GraphQL Playground interface with the following endpoint:
https://us-central1-<project-id>.cloudfunctions.net/api
You may have to edit the URL within the Playground to point to the correct URL (sometimes it is missing the /api section).
The playground offers us a look at the schema too, with the concrete GraphQL types being shown alongside the comment from line 5 of schema.js as well!
Every query we execute will construct the appropriate request object and sends through a request to our /api Cloud Function. Pretty neat!
The complete example can be found here:
If you like Firebase, you might want to check out Awesome Firebase 😎
Conclusion
GraphQL on Cloud Functions is easy to get started thanks to the shared API with Express and the GraphQL Server middleware for Express. This was just an minimal introduction to the pairing, in the future we will cover more on GraphQL and how we can leverage it with other Firebase tools!
Sources
📚 Cloud Functions for Firebase Documentation
💻 Express.js
📚 GraphQL
💻 apollo-server-express
Need something else to read?
📑 Table of Contents
An index post for my Medium Series
💬 The State of Cloud Functions (mid 19)
Google Next 19 in a Nutshell
💻 Cron & Cloud Functions for Firebase
The Serverless Cron we wanted!
💻 Express.js on Cloud Functions for Firebase
Auto-scaling APIs in seconds
If you found this useful, please share with your friends & colleagues.
