Instant Serverless GraphQL Backends

Rate this content

Grafbase is a data platform for developers that lets you build and deploy GraphQL backends with a top-notch developer experience.

8 min
08 Dec, 2022

Video Summary and Transcription

In the Schema 1st approach, you can build and deploy a backend only by writing your GraphQL SDL. Connect this to GitHub, and GraphBase takes care of the rest. Once the code is deployed, sign in to GraphBase using your GitHub account and explore the dashboard, schema, and playground. GraphBase offers authentication, authorization, permissions, and custom directives. Connect GraphBase to user-management software and create sign-in and sign-up pages.

Available in Español

1. Introduction to GraphBase and Backend Development

Short description:

In the Schema 1st approach, you can build and deploy a backend only by writing your GraphQL SDL. Connect this to GitHub, and GraphBase takes care of the rest. We can define models using GraphQL SDL, add relations between them, and run a local GraphBase API. The API allows us to create, update, delete, and read data. We can also fetch related data using pagination and retrieve singular records using unique fields. Finally, we can push our code to GitHub.

♪♪♪ So, in the Schema 1st approach, you can build and deploy a backend only by writing your GraphQL SDL. Connect this to GitHub, and GraphBase takes care of the rest. There are so many different features that I encourage you to go and check out, but in this video, we'll explore some of them. And, at the end, we'll use a user management platform to authorize requests to our GraphBase backend. There are many other things that we're working on at GraphBase, and we'll soon allow you to bring in other data sources to work with your backend.

So, let's dive on in. Here I have a Next.js application. I'm going to use the mpx command to initialize a new GraphBase project in the root of my Next.js project. So this shows how you can add GraphBase as a backend to your existing project. Here we can define all of our models using GraphQL SDL. We use the custom directive model to tell GraphBase to generate an API for us, and then we can use the scalar types and other directives such as unique here, and in this case, for the URL of a post, we can use an opt-in to further validation with the URL scalar. We can then go on to add relations between our models, and then we can run the mpx graphbase dev command to run a local GraphBase API on localhost 4000. If we open this up, and we have a look at the schema and the documentation, we can see all of this was automatically generated for us from the GraphBase CLI. And all of this works locally, and it gives you an API to create, update, delete, and read data. So in the case here, we are creating a new post, we can provide a custom URL and we can get that data back. If we try to create this again, we can see here that the URL directive and the at-unique directive have kicked in. We're not able to create a duplicate post with that same URL because we said it was unique.

Now, let's go on to create another post and this time we'll create an inline comment as a relation when we create a new post. So here, we'll give it some text and we'll submit that mutation. Next, let's create a new comment, but this time we'll take the ID from an existing post and we'll now link this comment when we create it. Now let's have a look at fetching all of our posts using the collection query. We can opt in to using the pagination and for each of our nodes, we can get the fields that we like. We can take this a step further by fetching the related comments of a post, which also supports pagination. Finally, we can retrieve singular records for our data in our backend by using the ID or any unique field. Let's take the ID of one of our posts and we'll now use the mutation to update. We can update using the ID or again, using that unique field. And here we can provide a new title value for this post. Now if we update our query when fetching all of our posts, and we get the ID of a comment, we can now use the mutation that's generated automatically to delete one of our comments. So we can provide either the comment ID or if we had any unique fields, we could provide that inside of the arguments. Next, let's create a GitHub repository and push all of our code to GitHub.

2. GraphBase Deployment and Backend Features

Short description:

Once the code is deployed to GitHub, sign in to GraphBase using your GitHub account. Search for the repository, connect, and create a new project. Explore the dashboard, schema, and playground. Add the ability for users to vote on posts. Update the UI and backend in a branch. Open a pull request to deploy a preview environment. Merge and approve the pull request to deploy to the edge. GraphBase offers authentication, authorization, permissions, and custom directives. Connect GraphBase to user-management software. Create a project with Clerk, configure authentication, and install dependencies. Create sign-in and sign-up pages. Configure environment variables. Run the local CLI and Next.js application. Create a query to the GraphBase backend. Validate authorization header. Update the schema and observe the error. Choose GraphBase as your next backend. Join the private beta at

Once we've deployed the code to GitHub, we can then sign in to GraphBase using our GitHub account. Then we can search for our repository and we can connect and create a new project on GraphBase. And this wouldn't be a SaaS app if there wasn't confetti! We can then explore the dashboard inside of GraphBase to explore the current schema and the playground where we can create and update data that's happening at the Edge.

Now let's imagine we want to add the ability for users to vote on certain posts. Well, I could update the UI and the back end at the same time in a branch. Then I can commit all of this code to GitHub and open a pull request and automatically GraphBase will deploy a unique preview environment for that specific branch. So here I can work with data that's scoped only to that branch so I'm not affecting anything that is in production and I can safely work and show all of my colleagues to make sure that the voting functionality works as we expect. So here we can see we are querying and mutating some data inside of our back end that is in that isolated branch.

Then once the team's happy, all we need to do is merge and approve that pull request and GraphBase will take care of deploying this to the edge. GraphBase also comes packed with many other features, things including authentication, authorization, permissions, and custom directives for trailing any updates to queries using the new live directive. You can connect GraphBase to almost any user-management software using JWTs or any OpenID Connect providers to automatically handle and authorize requests sent by users or groups of users. So let's check that out. Let's create a project with Clerk. We'll give it a name of GraphQL Galaxy. We'll allow passwords for our authentication type and we'll create the project. Now that's created, we'll create a JWT template for GraphBase. And here we can configure many things, including the group-based authentication strategy. Let's install a few dependencies, including Apollo Client, so we can make a request from our index page on our application. And we'll configure the Clerk provider using the Next.js hooks.

Now we'll create our pages for sign-in and sign-up for accounts with Clerk. Thankfully, Clerk takes care of all of this by providing ready-to-go and ready-to-use components that we can embed inside of our application. Now that we've added those, we can just configure a few more things, including our environment variables, so our front-end knows how to communicate with Clerk and GraphBase. Let's run both our local CLI with GraphBaseDev and our Next.js application. We'll create a new account with our email, and then we can update our index page to create a query that calls to our GraphBase backend. If we head to the index page, we should see that the query is running successfully because we are signed in, and we are sending a valid authorization header. This token is generated from Clerk, passed to GraphBase, and validated. But, if we update our schema now to only allow the DELETE operation, if we go back to our application and try to run the query to fetch all of our posts, we now should see that there is an error. If we inspect this error and have a look into why, we should see that the operation for the LIST type is no longer valid. Hopefully this very quick video has given you an idea on what backend to use for your next project. Check out where you can join the private beta for free today.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.