Learn Apollo, Netlify and Twit

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

Sell Products Using Stripe Checkout and Netlify Functions

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Up and Running with Gatsby

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

GraphQL Data in React with Apollo Client

Most developers would raise an eyebrow if they saw database queries being done in a for-loop, but GraphQL provides just enough abstraction that it isn't always intuitive exactly how many times each resolver fires at scale, nor is it obvious how to batch operations efficiently and still return the correct results to the correct consumer.

You'll learn how to use the GraphQL Data Loader pattern to improve the performance of your application, and solve scaling issues before they become a problem.

To do this, we'll first implement our own naive version of the pattern to understand why the API is shaped how it is. Then we will switch over to the official DataLoader package and explore the benefits further.

## Skills you'll Gain

- Implement a cache layer to optimize your requests
- Batch requests so your Database isn't overloaded
- Build a performant GraphQL API

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

Use GraphQL Data Loaders to Prevent Scaling Issues by Batching & Caching Database Requests

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

At the core of a good client-side GraphQL library is a cache. The cache is very important for improving the efficiency of your data retrieval and providing your users with a clean user experience.

In this course, we're going to see how Apollo's powerful cache helps easily solve complex UI problems, such as pagination, handling loading and error states, optimistic updates, and minimizing network requests.

We'll start from the basics, and look at how to make queries and mutations, but then we'll look at how the cache is behind most of Apollo's immediate benefits. We'll explore in-depth how it works, how it stores data, and how we can manually modify it manually for advanced scenarios.

Even if your backend doesn't fully support GraphQL yet, we'll look at how to write GraphQL queries in your components that retrieve local client state under the hood - or that can even make REST API calls.

Manage State in React Apps with Apollo Client and GraphQL

**Get started building dynamic apps with GraphQL and Vue3.**

As your app scales, so does the complexity of managing your routes and API endpoints. 

It gets tiresome. 

But this aspect of web development can be streamlined considerably! 

GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end.

But what does GraphQL *do*? 

Its power comes from giving you a *single* endpoint that you make all your queries to. Instead of making a request to a specific endpoint and getting a fixed response, you can write flexible queries to a single endpoint.

![REST vs GraphQL diagram](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1638989029/course-resources/create-a-graphql-powered-vue-3-application/rest_vs_graphql.png)

Vue3 has some great new features that we will be exploring, such as the setup script syntax. But you won't just be exploring Vue3's new features, we will be building a dynamic front end with an index, view pages generated from data, and forms.

To make our frontend dynamic, we will be powering it with GraphQL. We start with the basics by creating queries but we move on to more advanced topics such as query params, mutations, and pagination.

To actually use GraphQL in our Vue app we will be using the Vue Apollo Client. Which gives us convenient methods for making queries, getting the data back into the client, and handling errors.

## Gain These Skills

- Add GraphQL to a Vue 3 project
- Query and mutate data with GraphQL in Vue 3
- Create data-driven views with Apollo client
- Handle routing within a Vue 3 project
- Implement optimistic updates and infinite scroll

## Prerequisites

Some entry-level knowledge on Vue and GraphQL is recommended, but this course is beginner-friendly enough to where it isn't a strict requirement.

If you want to build a deeper foundation for both Vue and GraphQL we have a couple of awesome courses that you can hack through. 

For Vue, check out **[The Beginner's Guide to Vue 3](https://egghead.io/courses/the-beginner-s-guide-to-vue-3-1c46da8b),** which is also by Kevin. It's great for both newcomers to web dev and veterans alike. 

And for GraphQL, work through **[GraphQL Query Language](https://egghead.io/courses/graphql-query-language)** from Eve Porcello. Eve literally wrote the book on learning GraphQL and her course is similarly top quality. 

## What's Next?

Progressive Web Apps are a more advanced topic, and converting an existing Single Page **Vue** App into one makes for an excellent follow-up project. **->** [Offline-First Progressive Web Apps (PWA) in Vue.js](https://egghead.io/courses/offline-first-progressive-web-apps-pwa-in-vue-js)

If you want to take your **GraphQL** game to the next level, then becoming an expert in designing GraphQL schemas is the way to go. **->** [Designing GraphQL Schemas](https://egghead.io/courses/designing-graphql-schemas-99db)

And I know the following recommendation is a React course but *it really is that good*. You will learn some **advanced** techniques that will be applicable to Vue or any other Apollo compatible framework that you work with. **->** [Manage State in React Apps with Apollo Client and GraphQL](https://egghead.io/courses/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89)

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create a GraphQL Powered Vue 3 Application

In this lesson I refactor a simple application built with Apollo, GraphQL, and React to utilize Apollo Boost. Apollo Boost combines many of the Apollo libraries we had to import and configure separately into one awesome API. 

Resources:

[What's in Apollo Boost](https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost#whats-in-apollo-boost)

[Zero config GraphQL State Management](https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3)


Zero-config Apollo + GraphQL with Apollo Boost

In this lesson we look at how the Apollo @client directive can be used to fetch client-side state along with server data with one query. I also show how to update the client-side state using a mutation connected to a button.

Additional Resources [Apollo Client 2.0](https://dev-blog.apollodata.com/apollo-client-2-0-beyond-graphql-apis-888807b53afe)


Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into react-apollo 2.1.

Additional Resources:
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo Mutation Component

In this lesson I refactor some code that utilizes the Mutation component to update client-side cache to use the new ApolloConsumer component baked into react-apollo 2.1.

Additional Resources: 
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo ApolloConsumer Component

In this lesson we’ll execute GraphQL queries using our AWS AppSync API and show how to display the returned data inside of our React application using the AWS AppSync GraphQL client.

We'll create a query string using `gql` (`graphql-tag`) and pass that query into a `graphql` Higher-order component where we will pass the resulting data in our exisiting app.


Execute Queries to an AWS AppSync GraphQL API from a React Application

In this lesson, we’ll execute GraphQL mutations using our AWS AppSync API and show how to add data to the database from a React web application using the AWS AppSync GraphQL client.

We'll create a `mutation` query string that will call `createTodo` that is defined in our WAS AppSync GraphQL client. This query will be passed in as props from a Higher-order component and we'll wire up input in React to feed values into this query.

Execute Mutations to an AWS AppSync GraphQL API from a React Application

In this lesson, we’ll show how you can have your mutations work when the user is offline. We’ll handle the offline mutation with an optimistic response, then when the user comes back online the data will be sent to the dashboard for a seamless user experience.



Implement an Optimistic Response to a React UI & Showcasing Offline Functionality

In this lesson we’ll show how to use GraphQL subscriptions coming from our AWS AppSync API to listen to real time data changes in a React application and render the new data as it comes in.

Subscribe to New Data in a React Application with AWS AppSync GraphQL Subscriptions

Building a real world, scalable & production-ready GraphQL API is hard. In this course, we’ll learn how to create a production-ready GraphQL API that can handle everything from queries to mutations & subscriptions. We’ll also connect to our API from a React application and execute queries, mutations & subscriptions using the new API.



Course Overview: Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

You already know that Apollo Client can manage your remote data and state from a GraphQL server, but did you know that you can also use it to manage local state in your React apps? You can! 

`apollo-link-state` lets you query and mutate local state the same as you would a GraphQL server. This means that you don't need to add _another_ dependency like Redux or MobX to your app. 

Managing your remote and local state using the same interface results in a codebase that's easier to maintain and reason about.

Search

Search Results