Build Full-Stack Apps with GraphQL, Prisma, Node and React
4.3 (48 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
358 students enrolled

Build Full-Stack Apps with GraphQL, Prisma, Node and React

Learn GraphQL by building full-stack web applications with Prisma, NodeJs, Apollo Client v2, and React.Js
4.3 (48 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
358 students enrolled
Created by Haider Malik
Last updated 3/2020
English
English [Auto-generated]
Current price: $125.99 Original price: $179.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 9 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build highly scalable GraphQL APIS
  • Build frontend apps with React and Apollo client
  • Build and deploy full-stack web application from scratch
Course content
Expand all 112 lectures 11:16:10
+ Big Picture of Prisma
14 lectures 27:03
What is Prisma
00:06
Why Prisma
00:44
What Prisma is not
00:10
Who should use Prisma
00:06
What platform and Cloud Providers Prisma work
00:09
What are the benefits of GraphQL
00:53

Prisma generates a GraphQL API for your datamodel.

The datamodel of your service configuration has two major roles:

  • Define the underlying database schema (they are mapped to database tables or equivalent structures, like documents, in the case of schemaless databases).

  • It is the foundation for the auto-generated CRUD and realtime operations of your Prisma API

The datamodel is written in the GraphQL Schema Definition Language (SDL) and stored in one or more .graphql-files. These .graphql-files need to be referenced in your prisma.yml under the datamodel property. For example:

endpoint: __YOUR_PRISMA_ENDPOINT__ datamodel: datamodel.prisma

Preview 02:30

Prisma provides an API to connect with your GraphQL resolvers

Preview 02:34

he Prisma CRUD API guides developers towards writing more performant code by encouraging good patterns. Prisma's query engine transforms incoming queries for optimal performance.

Preview 01:23

The intuitive SDL syntax makes it easy for developers and domain experts to collaboratively model the application domain.

Design your domain model using a simple expressive syntax called SDL. It is easy to learn and allows you to express everything from simple scalar types to relations and embedded documents.

Preview 01:50

Prisma has a modular architecture that enables us to support a broad set of databases. Each database connector supports a subset of the OpenCRUD data query spec.

What databases are supported by Prisma
01:10

Prisma Cloud is a serverless GraphQL database platform that provides a simple abstraction and handy tools to manage your databases. It comes with a set of awesome features that make your data-related workflows a breeze

What is Prisma Cloud
01:50
VS Code Setup
02:46
  1. Select the Demo server (or set up a Prisma server with your own DB)

  2. When the browser opens, register with Prisma Cloud and go back to your terminal.

  3. Select the region for your demo server.

  4. Use the suggested values for service and stage by hitting Enter twice.

Preview 10:50
+ Build GraphQL server with Prisma
4 lectures 29:43
What is DataModel?
01:06

The entire collection of these data types is referred to as your data model. Once your data model is defined in SDL, Prisma translates it into an according databaseschema and sets up the underlying database accordingly. ... Previously you learned that all GraphQL APIs are backed by a GraphQL schema.

Preview 11:41

In this video, will setup GraphQL server with Prisma.

Preview 12:54

Variables allow you to dynamically replace configuration values in your service definition file prisma.yml.

To use variables inside prisma.yml, you need to reference the values enclosed in ${} brackets. Inside the brackes, you first need to specify the variable source and the variable name, separated by a colon.

You can reference environment variables inside the service definition file.

When using an environment variable, the value that you put into the bracket is composed of:

  • the prefix env:

  • the name of the environment variable

Setup env variables for Primisa endpoint
04:02
+ CRUD in Prisma
3 lectures 28:24

The data model is the foundation for the GraphQL API of your Prisma service. Based on the data model, Prisma will generate a powerful GraphQL schema (called Prisma database schema) which defines CRUD operations for the types in the data model.

Create Data Model in Prisma
03:47

The Prisma API offers two kinds of queries:

  • Object queries: Fetch single or multiple nodes of a certain object type

  • Connection queries: Expose advanced features like aggregations and Relay compliant connections enabling a powerful pagination model

When working with the Prisma API, the following features are also useful to keep in mind:

  • Hierarchical queries: Fetch data across relations

  • Query arguments: Allow for filtering, sorting, pagination and more

In general, the Prisma API of a service is generated based on its data model. To explore the operations in your Prisma API, you can use a GraphQL Playground.

Fetch Records from Database
10:00

The Prisma API offers

  • Simple mutations: Create, update, upsert and delete single nodes of a certain object type

  • Batch mutations: Update and delete many nodes of a certain model

  • Relation mutations: Connect, disconnect, create, update and upsert nodes across relations

In general, the Prisma API of a service is generated based on its data model. To explore the operations in your Prisma API, you can use a GraphQL Playground.

Create, Update and Delete Record in Prisma
14:37
+ Create Frontend CRUD App with React and Apollo Client
13 lectures 01:46:02

In this video, we are going to create react application using create-react-app cli

Create React Application
03:20

React ApolloReact Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, inReact Native, or in Node.js when you want to do server-side rendering.

Create Apollo client in React Application
07:05

To connect Apollo Client to React, you will need to use the ApolloProvider component exported from react-apollo. The ApolloProvider is similar to React’s context provider. It wraps your React app and places the client on the context, which allows you to access it from anywhere in your component tree.

In index.js, let’s wrap our React app with an ApolloProvider. We suggest putting the ApolloProvidersomewhere high in your app, above any places where you need to access GraphQL data. For example, it could be outside of your root route component if you’re using React Router.

Connect Apollo Client to React
05:29

Fetching data in a simple, predictable way is one of the core features of Apollo Client. In this guide, you’ll learn how to build Query components in order to fetch GraphQL data and attach the result to your UI. You’ll also learn how Apollo Client simplifies your data management code by tracking error and loading states for you.

This page assumes some familiarity with building GraphQL queries. If you’d like a refresher, we recommend reading this guide and practicing running queries in GraphiQL. Since Apollo Client queries are just standard GraphQL, you can be sure that any query that successfully runs in GraphiQL will also run in an Apollo Query component.

Fetch Data using Apollo Query Component
11:30

The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.

Understanding render Prop pattern in React
09:21

HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state

Creating Forms in React
10:24

Now that we’ve learned how to fetch data with Apollo Client, what happens when we need to update that data? In this guide, you’ll discover how to build Mutation components in order to send updates to your GraphQL server. You’ll also learn how to update the Apollo cache after a mutation occurs and how to handle errors when things go wrong.

Send GraphQL Mutation from React Component
09:07

Sometimes when you perform a mutation, your GraphQL server and your Apollo cache become out of sync. This happens when the update you’re performing depends on data that is already in the cache; for example, deleting and adding items to a list. We need a way to tell Apollo Client to update the query for the list of items. This is where the update function comes in! update functions aren’t required to update the cache for all mutations, but our addTodo mutation is an example of where it comes in handy.

The update function is called with the Apollo cache as the first argument. The cache has several utility functions such as cache.readQuery and cache.writeQuery that allow you to read and write queries to the cache with GraphQL as if it were a server. There are other cache methods, such as cache.readFragment, cache.writeFragment, and cache.writeData, which you can learn about in our detailed caching guide if you’re curious.

Updating Apollo Cache After Mutation
10:00

React Router is the standard routing library for React. From the docs: “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in.

Adding Routing with React Router
08:36

card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Render List items to Bootstrap card component
01:29

In this video, we will write Query for single record. I will you how to fetch single record in React component

Query for Single Record
11:43

In this video, I will show you how to edit record in React Component. We will use Mutation component to update the record

Edit Record using update Mutation
09:39

In this video, I will show you how to delete the record. We will use Apollo Mutation to delete the record

Mutation for Delete Record in React Apollo
08:19
+ Authentication in Prisma and GraphQL
5 lectures 31:23

In this video, we will restructure the resolvers into separate directory. I will create a separate File for Mutation, Query and Subscription

Restructure the resolver functions into separate folder
03:46
Understanding JSON Web token Authentication
00:04

In this video, we will implement the signup feature. A user can create new account

Signup User in Prisma and GraphQL
12:25

In this video, we will implement the login feature. A user can login to his or her account

Login User in Prisma and GraphQL
06:38

We will protect our resolvers in graphQL. I will implement JWT authentication in GraphQL and Prisma

Apply Authentication on Resolvers
08:30
+ Authentication in React Apollo Client Application
7 lectures 01:00:23

In this video, we will send the login request from frontend application. After successfully loggedIn we will save the token in LocalStorage

Send Login Request from Frontend App
12:19
Save Token to LocalStorage after LoggedIn
02:50

In this video, you will be able to learn how to implement logout user feature in prisma and React Apollo application

Implement Logout User
07:55

In this video, we will protect our routes in React Router. I will use external package to implement require authentication

Require Authentication on Edit and Delete
02:51

In this video, We will implement the Signup feature in React, apollo client Application.

Implement Signup User on Frontend
12:21

Protected routes are an important part of any web application. In this post we’ll break down the “Redirects (Auth)” example on the React Router documentation to learn how to create authenticated routes (routes that only certain users can access based on their authentication status) using React Router.

Protect Routes in React using React Router
08:43
Add Authorization header to every request in React Apollo Client
13:24
+ Error Handling
2 lectures 11:43

In this video, We will create a separate component to handle the Errors in React Application

Create Error Message Component to render Errors
07:11

In this video, we will display a spinner for loading data in React Application

Adding Spinner for Loading Data
04:32
+ Pagination in Prisma and React Apollo Application
10 lectures 01:13:02

When querying all nodes of a specific object type, you can supply arguments that allow you to paginate the query response.

Pagination allows you to request a certain amount of nodes at the same time. You can seek forwards or backwards through the nodes and supply an optional starting node:

  • to seek forwards, use first; specify a starting node with after.

  • to seek backwards, use last; specify a starting node with before.

Paginate List fo records of Prisma
06:04

Object queries directly return a list of nodes. In special cases, or when using advanced features, using connection queriesis the preferred option. They are an extension of (and fully compliant with) Relay connections. The core idea of Relay connections is to provide meta-information about the edges in the data graph. For example, each edge not only has access to information about the corresponding object (the node) but also is associated with a cursor that allows to implement powerful pagination.

Count all Records using Prisma Connection Query
14:58

In this video, We will create a pagination component in React. I will show you how to add pagination controls in React Application

Create Pagination Controls in Frontend Application
05:35

In this video, we will send pagination request to backend prisma graphql server. We have to display specific list of records in the component

Implement Pagination in React Application
12:24

When querying all nodes of a type you can supply different parameters to the where argument to constrain the data in the response according to your requirements. The available options depend on the scalar and relational fields defined on the type in question.

Filtering Records in Prisma
04:27

In this video, we will create search course component. A user will be able to search the records. We will implement the search functionality in this course

Create Search Course Component
05:17

In this video, we will send the search request from the frontend application to prisma GraphQL server.

Execute Search Query and display courses
10:26

When querying all nodes of a type you can supply the orderBy argument for every scalar field of the type: orderBy: <field>_ASC or orderBy: <field>_DESC.

Apply Sorting on the Records
07:20

Sometimes when you perform a mutation, your GraphQL server and your Apollo cache become out of sync. This happens when the update you’re performing depends on data that is already in the cache; for example, deleting and adding items to a list. We need a way to tell Apollo Client to update the query for the list of items. This is where the update function comes in! update functions aren’t required to update the cache for all mutations, but our addTodo mutation is an example of where it comes in handy.

The update function is called with the Apollo cache as the first argument. The cache has several utility functions such as cache.readQuery and cache.writeQuery that allow you to read and write queries to the cache with GraphQL as if it were a server. There are other cache methods, such as cache.readFragment, cache.writeFragment, and cache.writeData, which you can learn about in our detailed caching guide if you’re curious.

Update Cache after creating records
03:02

Sometimes when you perform a mutation, your GraphQL server and your Apollo cache become out of sync. This happens when the update you’re performing depends on data that is already in the cache; for example, deleting and adding items to a list. We need a way to tell Apollo Client to update the query for the list of items. This is where the update function comes in! update functions aren’t required to update the cache for all mutations, but our addTodo mutation is an example of where it comes in handy.

The update function is called with the Apollo cache as the first argument. The cache has several utility functions such as cache.readQuery and cache.writeQuery that allow you to read and write queries to the cache with GraphQL as if it were a server. There are other cache methods, such as cache.readFragment, cache.writeFragment, and cache.writeData, which you can learn about in our detailed caching guide if you’re curious.

Fix Cache after Delete Records
03:29
+ Optimistic UI In React Apollo Application
1 lecture 05:39

Let’s say we have an “edit comment” mutation, and we want the UI to update immediately when the user submits the mutation, instead of waiting for the server response. This is what the optimisticResponseparameter to the mutate function provides.

The main way to get GraphQL data into your UI components with Apollo is to use a query, so if we want our optimistic response to update the UI, we have to make sure to return an optimistic response that will update the correct query result. Learn more about how to do this with the dataIdFromObject option.

Improve UI Performance using Optimistic UI in React Apollo
05:39
+ Deploy Prisma and React Application to Heroku
2 lectures 27:03

Heroku is one of the most popular PaaS providers used by developers to deploy their apps. With the new Prisma Cloud integration, you can now deploy Prisma to Heroku with one click.

Deploy Prisma Project to Heroku
13:24

There’s no doubt Heroku is popular infrastructure platform. Times of running your own dedicated server are not gone but for development and low volume purposes using services like Heroku does make a lot of sense.

Recently I worked on React frontend for cool gaming startup, and yes, they used Heroku for servers. It was interesting to explore Heroku since my experience is mostly with Amazon AWS and dedicated servers.

Deploy React Project to Heroku
13:39
Requirements
  • Javascript Basics are required
  • NodeJs basics are required
Description

What Is GraphQL?

GraphQL is a query language for your APIs. It’s also a runtime for fulfilling queries with your data.

Who is this course for?

This course is for most programmers. If you write software that fetches data from a server, or you write server code that provides data to others, this course is for you. It’s particularly relevant to frontend and backend web and mobile developers.

This course will be especially poignant to these groups of people:

  • Backend devs who work on REST APIs and write a lot of similar data-fetching code, or who maintain view-specific endpoints.

  • Frontend devs of medium- or large-sized apps who either: A) don’t use a caching library, and manually keep track of what data has already been fetched from the server, or B) use a cache, and write a lot of code to fetch data over REST and put it in the cache.


What are the drawbacks of REST?

When GraphQL was first released, some touted it as a replacement to REST. “REST is dead!” early adopters cried, and then encouraged us all to throw a shovel in the trunk and drive our unsuspecting REST APIs out to the woods. This was great for getting clicks on blogs and starting conversations at conferences, but painting GraphQL as a REST killer is an oversimplification. A more nuanced take is that as the web has evolved, REST has shown signs of strain under certain conditions. GraphQL was built to ease the strain.”

What will you learn?

Introduction to Prisma :  Prisma is a performant open-source GraphQL ORM-like* layer doing the heavy lifting in your GraphQL server.

Build GraphQL Server with Prisma: Introduces you how to build highly scalable GraphQL server with Prisma

CURD In Prisma: You will learn to implement create, read, update and delete the record

Create a Frontend CRUD App with React and Apollo Client : You will learn how to create, read, update and delete the record in React Application using Apollo Client

Authentication in Prisma and GraphQL: In this module, I will teach you how to implement Json web token authentication in GraphQL and Prisma

Authentication in React Apollo Client Application: We will implement Authentication on React Application.

Error Handling: I will teach you how to implement error handling in React and Prisma

Pagination in Prisma and React Apollo Application: This module covers the pagination feature on GraphQL and React application

Optimistic UI In React Apollo Application: Introduces you how to improve the performance of React application

Deploy Prisma and React Application to Heroku: You will learn how to deploy Prisma and React Application to Heroku

Subscriptions in Prisma and React Apollo Application: Understand the real-time subscriptions by building chat application

State Management in React Application using Apollo Link:  A modern way to manage state in Apollo client application

File Upload in Prisma and React: Learn how to upload a file in Prisma, GraphQL and React application


Who this course is for:
  • Javascript developers who want to build full-stack apps with GraphQL and React
  • Developers who want to learn Prisma and React Apollo Client
  • Developers who want to GraphQL in production