GraphQL with Mercurius and Prisma, love at first sight

Rate this content
Bookmark
This talk explores the transition from REST API to GraphQL, highlighting the use of Mercurius and Prisma. The speaker emphasizes how GraphQL provides API flexibility for various devices like smartphones and smart TVs. Mercurius, built on Fastify, is praised for its ease of use and excellent documentation. Prisma is chosen for its user-friendly ORM-like control, robust data modeling, and TypeScript support. The demo showcases creating and managing pizzas using Prisma for database operations and Mercurius for GraphQL queries. The talk also covers using the Prisma schema for defining database entities and properties, and how the Prisma CLI helps with project initialization and migrations. The integration of Prisma into Fastify applications is discussed, emphasizing the improved developer experience. The speaker also touches upon using TypeScript for type-safe queries and business logic, and how Mercurius Code-Gen converts JQL files to TypeScript definitions. The talk concludes with a Q&A session addressing topics like Mercurius's support for GraphQL subscriptions and comparing it with Apollo.

From Author:

In this speech, I'll talk about the benefit of using GraphQL and show a small demo of an endpoint created with Fastify Mercurius and Prisma.

This talk has been presented at Node Congress 2023, check out the latest edition of this JavaScript Conference.

FAQ

Luca Del Pupo is an Italian FoodStack developer who specializes in JavaScript and TypeScript. He creates content on his YouTube channel and enjoys running and hiking.

Luca Del Pupo presented to share his experience and insights on transitioning a customer from using REST API to GraphQL.

GraphQL offers increased flexibility and power for clients, particularly useful when APIs are consumed by a variety of devices like smartphones and smart TVs. It allows clients to request exactly the data they need.

Mercurius is a GraphQL server built on top of Fastify, known for its performance and ease of use. It is chosen for its compatibility with Fastify, simplicity in setting up a GraphQL server, and excellent documentation.

Prisma is preferred for its user-friendly ORM-like control over database operations, robust data modeling, and TypeScript support, making it easier to maintain and develop applications.

Prisma provides a straightforward syntax similar to TypeScript, makes data modeling simple, ensures type-safe database queries, and supports easy database migrations, all of which streamline the development process.

Prisma can be easily integrated into Fastify applications through a simple plugin, enhancing the developer experience without the cumbersome setup typically associated with database integrations.

TypeScript is essential for ensuring type safety and helping developers focus more on business logic rather than bugs related to data types, which is supported well by both Prisma and Mercurius.

Luca Del Puppo
Luca Del Puppo
34 min
14 Apr, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to Prisma and Mercurius

Short description:

Today I will be speaking about Prisma with Mercurius and our experience in moving from REST API to GraphQL. Over the last 10 years, I have primarily worked with REST API, which served browsers and desktop applications well. However, with the rise of other devices such as smartphones and smart TVs, we needed to improve the flexibility of our API. This led us to explore the potential of GraphQL. Working with small and medium companies, we identified the need for an easy-to-maintain framework that supports junior and middle developers while allowing senior developers to focus on business logic. With these requirements, we chose to use Mercurius for the GraphQL part and Prisma for data access.

Okay, today I wanna speak about, probably, okay. And Prisma with Mercurius. So, first of all, who I am. I'm Luca Del Pupo and I'm an Italian guy. I, sorry, I'm a FoodStack developer and I love JavaScript and also TypeScript. In my free time, I create some content in my YouTube channel and I love to write something for the other to show my experience and to share my experience. And I love running and hiking. But now it's time to go to the topic.

So, why I'm here? First because the committee decided to vote my talk, so thank you. And then because in the last period, I tried to help a customer for move from REST API to GraphQL. So I wanna share with you our experience and how we decided to move in this way.

So, in the last 10 years, typically, I work only with the REST API. When I start to work, the API typically serve only browser or maybe some desktop application. And REST API works very well in this way, in this case, and you can use it without any problem. I don't have any mistake or problem against REST API because they work very well and I use it in my daily in this moment, but in some scenario, we have to improve the flexibility of the API. Typically in the last period, we start to use other devices that use our API, for instance, smartphone, and also a smartphone and a smart TV. So we start to learn the potential of GraphQL because we need to give more powerful, more power to the client, unfortunately. And so we start to learn and try GraphQL.

Before moving to the decision, I wanna show you also the need for the customer in this case. Typically, I work with a small and medium company, and they have a lot of junior and middle developer. And some senior developer. The need for this customer are these, typically. They want a framework or a code base easy to maintain. Then the framework or the architecture need to help in the day by day. The developer need to help the junior, typically because they want to put value and increase the skill, and also help the senior to not spend time to resolve a framework problem. Okay. Then we need, it's a must, have a TypeScript in our application, and the developer must be focused on business and not to resolve a framework problem. So with this need, we decided to move in this way, with Mercury in the GraphQL part and Prisma to call the database and the part of the data access. The developer stay in the middle. So I have to create the GraphQL signature and create the code to access to the database using Prisma.

2. Reasons for Choosing Mercurius and Prisma

Short description:

We decided to move to Mercurius and Prisma for our GraphQL and database implementations, respectively. Mercurius is easy to learn if you already know Fastify, and it has excellent documentation. Prisma improves the developer experience and allows for easy data modeling and type-safe queries. It also integrates well with Fastify. Now, let's move on to the demo.

Why did we decide to move in this way? First, let's talk about the GraphQL implementation. We already know Fastify, and Mercurius is built on top of Fastify, so if you already know Fastify, it's easy to learn Mercurius. Mercurius is easy to use, and the documentation is awesome. You can find everything you need on the website, and if you have any questions, the community is very responsive. To keep the support out of the box, there is a small npm package called Mercurius Code Gen that helps convert your GraphQL schema into TypeScript definitions. This helps ensure the definition of your GraphQL and allows you to create operations to test your GraphQL server. It also helps catch errors during code generation, preventing issues from reaching production.

Now let's talk about the database implementation. We decided to move to Prisma because it helps improve the developer experience and is easy to use and maintain. If you are familiar with TypeScript, creating a database and data access layer with Prisma is simple. Prisma has a good data modeling feature, making it easy to create entities. It also allows you to create type-safe queries, guaranteeing the correctness of your queries during the build time of your application. Prisma's migration feature helps keep your database up to date in production. Additionally, integrating Prisma into your Fastify application is straightforward with a simple plugin. Both Mercurius and Prisma are TypeScript-friendly, making them a great fit for our development stack.

Now that I've provided some background, let's move on to the demo where I'll show you the code and the benefits of this solution. First, I'll run the server so you can see the demo in action.

QnA

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

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adopting GraphQL in an Enterprise
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adopting GraphQL in an Enterprise
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.

Workshops on related topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
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
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
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 for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
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.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
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.
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
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