Learn Graphql, Nginx and Svelte


Next.js is one of the most popular server-side-rendered React frameworks you can use to build production-ready serverless applications in record time. 

On the other hand, Fauna is a flexible, serverless, distributed document-relational database. Fauna has a powerful GraphQL API and custom resolver support. 

Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

In this course, Shadid guides you through building your very own full-stack serverless marketplace application using Next.js, GraphQL, and Fauna. 

You will learn,

- How to work with Apollo GraphQL Client in Next.js
- How to setup Fauna GraphQL
- Data modeling in Fauna
- How to write custom Fauna GraphQL Resolvers (UDFs)
- How to authenticate with Auth0?
- Stripe payment 



GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Full-Stack Serverless Applications with Next.js & Fauna

One of the most well-known GraphQL features is that it lets you do things like replacing multiple REST calls with a single query. You might have done some query experimentation with demo APIs or working on a Gatsby site. 

But there's more to GraphQL than just making queries.

For example, with mutations and subscriptions, GraphQL can smooth out the process of implementing real-time features in your web applications.

In this new course, you'll get practice with these features as egghead's own Ian Jones guides you through building a real-time chat app that's backed by GitHub Issues.

The tools used for the course are OneGraph and Formidable Labs' urql client.

OneGraph is great because it allows you to expose a single GraphQL endpoint that can access data from multiple services including GitHub, Stripe, Airtable, and more. It handles things like authentication for us as well, as you'll see in the course.

At Formidable Labs, the team released urql as a lighter weight alternative to Apollo or Relay that supports the most common interactions with a GraphQL server through their handy React Hooks. 

The course starts with a fresh Create-React-App and touches upon topics like using GraphQL query variables, working with Hooks, handling authentication with React Context, and setting up & consuming the GraphQL subscription.

Along the way, Ian also works through debugging some common errors that you may encounter when developing your own GraphQL apps in the future!

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

React Real-Time Messaging with GraphQL using urql and OneGraph

_Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos._

Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

- Gatsby
- Hasura
- Heroku
- Auth0
- Chakra UI

[View the demo](https://playlisthunt.netlify.app/) live online!

Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

## Modern techniques

In the process, implement techniques to make your app experience dynamic on some portions, and static in others. 

Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

Use the latest and greatest of Gatsby, like the brand new [file-system routing APIs](https://www.gatsbyjs.com/docs/file-system-page-creation/). 

## Who is this course for?

Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

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

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

GraphQL brings joy to using APIs. Even though it's based on a type system, GraphQL in many ways is more flexible than REST.

But the flexibility that makes GraphQL a joy to work with can have its downsides if you aren't careful.

Schema design is an area where one small oversight at the beginning can get you stuck having to deal with weird naming, bloated duplicates, and other annoying workarounds.

It doesn't have to be like this!

Nik Graf has extensive experience designing GraphQL schemas, for a variety of business applications.

In this course, Nik has prepared several examples following different design patterns. Through exploration and comparison, you'll come away with actionable knowledge for designing and extending schemas.

Follow Nik, and avoid making Schema mistakes that will come back to bite you later.

Designing GraphQL Schemas

GraphQL is gaining traction as one of the most popular ways to create an API. Regardless of which GraphQL implementation you pick, you’ll use the QL in GraphQL — the query language — to query data, change data with mutations, and listen for data changes with subscriptions.

You need to know the Query Language regardless of the server-side implementation.  In this course, we will learn the GraphQL query language by sending an assortment of GraphQL operations to an existing API. 

To start, we’ll learn how to write queries to obtain all the data needed for an app in one response. As the course progresses, we’ll use mutations to add and change data. To wrap up, we’ll investigate GraphQL subscriptions and realtime data. 

After the course, you’ll be ready to communicate with a GraphQL API regardless of server-side implementation using the GraphQL query language.

GraphQL Query Language

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

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

Up and Running with Gatsby

Learn how to add optimized images to your Gatsby site with the `gatsby-image` plugin.

These videos dive into:

- installing and configuring plugin options
- sourcing images to be queried via GraphQL
- displaying traced-svg or "blurred-up" images
- different image types supported by `gatsby-image`
- as well as alternatives for using images in Gatsby

Image Loading and Optimization in Gatsby with gatsby-image

In this playlist, we are going to go over how to set up and use urql as a GraphQL client. 

You will learn how to set up an Urql `Provider` component so that all of your React components have access to urql. Then you will learn how to use 3 of urql's React Hooks:

- useQuery
- useMutation
- useSubscription

Each of these lessons covers their corresponding GraphQL topic: Queries, Mutations, and Subscription.

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Introduction to Urql: A React GraphQL Client

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

WordPress is the most popular content management system in the world. Content creators are able to easily customize nearly everything about WordPress from their admin dashboard, providing a really pleasant content management experience. Using Gatsby as a frontend for your WordPress sites makes the experience of developing the site and visiting the site just as pleasant.

Moving your WordPress frontend to the Jamstack means you keep the convenience of using WordPress’s custom backend for creating and editing content while _also_ avoiding some of WordPress’s biggest downsides.

Historically, WordPress has many downsides, including:

- **Security** — because it’s the most popular content management system in the world, hackers work hard to find and exploit security holes in WordPress sites.
Performance — through a combination of legacy code, community plugins, and other challenges, WordPress sites can easily become slow to load.
- **Scale** — if a WordPress site suddenly becomes very popular (a great thing!) it can overload servers and cause the website to go down (a not-so-great thing!) without complex scaling techniques.
- **Cost** — a WordPress site requires always-on hosting, and specialized hosting can be expensive. Adding support to handle massive scale adds significant cost, too.

Switching to the Jamstack helps mitigate — and even eliminate! — these downsides:

- **More secure** — Jamstack sites don’t connect to the server or database after they’re built. This makes it much harder to hack the site.
- **More performant** — by doing less work for each request and leveraging modern tools, Jamstack sites tend to outperform WordPress sites out of the box, and can be very fast with a bit of extra effort.
- **More resilient** — because Jamstack sites ship to a content delivery network (CDN) by default, a sudden surge of site visitors won’t take your site down.
- **More affordable** — many Jamstack hosting solutions have generous free tiers that are plenty for most small to medium sites, and upgraded accounts typically cost less than specialized WordPress hosting.

Switching to the Jamstack gives you all of the benefits of WordPress and helps you avoid the downsides!

In this collection, we walk through the full process of migrating a WordPress site to the Jamstack, which keeps all the flexibility and power of WordPress’s admin dashboards while adding all the benefits of the Jamstack.

Migrate a WordPress Site to the Jamstack Using Gatsby

With GraphQL, you can define the shape of your data in a schema, and GraphQL will fulfill the request with the precise data you need. When you need it. This doesn't come without a cost. GraphQL adds a lot of complexity to your application by requiring you to define your schemas through types, mutations, and resolvers.

AppSync is a fully managed serverless GraphQL service that fast-tracks your API development. You can define a single type, and AppSync auto-generates a schema, queries, mutators, and subscriptions for you.

In this course, Nader Dabit will show you how to:

- build a production-ready GraphQL API through AWS AppSync
- create and modify data through the AWS AppSync console
- connect a React application to the GraphQL API
- execute queries, mutations, and subscriptions for data through the API in React

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

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

In this course we will learn some of the basics of getting data into and out of Neo4J, as well as touch on some of the libraries and tooling available in the Neo4J community ecosystem, which we will leverage to quickly create and use a full-featured GraphQL API.

We will start by learning how to run and interact with Neo4J locally. Then we will develop a graph model in which to store the data that we pull from SWAPI via REST. We will then create an Apollo GraphQL API driven by a few simple schemas which fit into this model. We will then write some simple code to crawl SWAPI and insert the data into Neo4J through our GraphQL API. Once there is data in the store, we will learn about some of the features in `neo4j-graphql-js` that make connecting and accessing our graph Nodes easier.

Neo4j delivers the lightning-fast read and write performance you need. Neo4j combines native graph storage, scalable architecture optimized for speed, and ACID compliance to ensure predictability of relationship-based queries.

neo4j

Build a Neo4J & GraphQL API

Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. 

As a result, GraphQL developers everywhere wanted to use them for their Apollo Client components, instead of relying on render props pattern. In August of 2019 things have changed and Apollo Client now has official support for React hooks, by providing `useQuery`, `useLazyQuery`, `useMutation` and `useSubscription` hooks.

If you'd like to learn how to use them, this playlist is for you!

Learn Apollo Client Hooks

In this course, we take a look at a new data query language and runtime called GraphQL. GraphQL was designed and built at Facebook to help product developers request and receive the data they need for their mobile and web applications. GraphQL sits on top of your application’s data access layer, providing clients with the ability to explicitly specify their data requirements and the guarantee that this data won’t change.

GraphQL manages these kinds of guarantees through a mixture of its Type System and Query semantics, both of which are pieces of GraphQL that we’ll look at in this series. We’ll also take a look at Mutations, and how to make our GraphQL Servers Relay-compliant using Nodes, Edges, and Connections.

Build a GraphQL Server

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

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

**Build a fully managed, serverless GraphQL API powered by TypeScript and AWS CDK in a matter of hours, not days.**

AWS CDK gives us the power to go all-in with infrastructure as code for AWS. With it, we can create a full GraphQL API with AppSync, a database with DynamoDB, serverless functions with Lambda, and much more. 

In this course, you will learn how to do all of the above from your command line and code editor, which will save you time and give you greater flexibility. 

Want to delete your stack? That's fine, just run `cdk destroy` and *poof,* all of the resources are gone. Changed your mind? Just deploy the stack again and they all come back. 

**AWS CDK makes it that easy.**

And since we are working from the command line and our code editor, we will take advantage of TypeScript and other third-party libraries to improve our developer experience. 

So stop wasting time in the AWS console, check out this course, and learn how to leverage infrastructure as code to your advantage.

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Build a GraphQL API with AWS CDK and AppSync

In this course, we will be building a React Native news app that is read-only when offline. 

The videos are recorded on a Mac with an iPhone 13 Simulator using plain React Native, but you can do this course using Android, Windows and even the Expo managed workflow. See the lesson description for platform-specific instructions. The solutions repo has been verified to work on a Pixel 3a Emulator on Mac.

The completed app for this course is available [here](https://github.com/kadikraman/news-flash) and each lesson will include a link to the commit that added the code so you can check your work.

After we build our news app, we're going to enhance it to make it read-only when offline using urql'g GraphCache.

This course will require you to run the api locally on your device. The api repo is available [here](https://github.com/kadikraman/news-flash-api).

**Resources:**
- urql: https://formidable.com/open-source/urql/docs/
- Insomnia: https://insomnia.rest/
- Async Storage: https://github.com/react-native-async-storage/async-storage
- React Native Netinfo: https://github.com/react-native-netinfo/react-native-netinfo

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Build a News App with React Native, GraphQL and TypeScript

**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.