 Resources from Ian Jones in 2021

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

🚀 In this collection, I will be going over some command line tools I use on a daily basis that make my life a lot easier.

[First up is fzf](https://github.com/junegunn/fzf).

> fzf is a general-purpose command-line fuzzy finder.

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Upgrade Your Terminal and Make It a Joy to Work with

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 collection will cover the basics of how to interact with an HTML document with JavaScript. We will go over:

- What is the DOM?
- fetch elements from an HTML document
- add HTML nodes to a HTML document
- Respond to click events

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Introduction to Client Side Web APIs

Yarn 2 (Berry) has finally [released a stable version](https://dev.to/arcanis/introducing-yarn-2-4eh1)! 

The yarn team has been working on this release for over 2 years. 

This collection goes over: 

- What yarn pnp is and how it tries to solve the `node_modules` problem
- How to install yarn globally and locally inside of a single project
- How to use `yarn dlx`
- How to use `yarn up` to manage yarn workspace dependencies



Fast, reliable, and secure dependency management.

yarn

Yarn 2 AKA Berry

Stimulus is a JavaScript framework that is purposed to enhance your HTML. Stimulus will monitor your HTML and wait for its `data-controller` attribute to be declared on an element. Thats when you controller JavaScript is connected and its methods triggered.

Intro to Stimulus

Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency. 

VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

Text Manipulation in VSCode

VSCode can be used for almost any programming language or framework. That encompasses quite a few workflows. 

Through extensions and built-in features, you can customize VSCode to suit the workflow you need that will support your development.


Development Workflows in VSCode

RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

- React
- GraphQL
- Prisma

RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.


Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

redwoodjs

Introduction to RedwoodJS: full-stack framework for JAMstack

VSCode ships with quite a few features that aren’t immediately apparent. This playlist will guide you through some of the features VSCode has to offer and get you comfortable navigating and editing files in it.

Learn: 
- VSCode Command Palette
- Configuration
- Navigation
- Custimization

VSCode Basics 

In any programming language or JavaScript framework, you’ll find yourself writing certain lines of code over, and over… and over again. That can be automated. VSCode uses the idea of snippets to do this. Snippets allow you to define templates that write the boilerplate for you in whenever you need.

You can define your own snippets, download them as a package from the Marketplace or use Emmet (pre-installed) to save time and avoid writing boilerplate or commonly used patterns.

Code Generation in VSCode 

Dendron is a Visual Studio Code extension that allows you to easily manage your personal notes. 

You can use it to track your daily todos or reference notes. 

Features Dendron ships with:

- markdown
- markdown preview
- fast note navigation
- fast note creation
- backlinks
- opt-in note schemas
- note graph

Upgrade your note taking workflow with VS Code and Dendron

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

We use `urql`'s `useQuery` to fetch data from a `GraphQL` endpoint. We look the `result` of the query, which gives us access to the queries status. 

`result.fetching` will be true while the query is running. `result.error` will contain an error if the query returned an error. `result.data` will contain the data of our query to display to our user.
 

Query GraphQL Data with Urql using React Hooks

When you fetch data, you often want more than what a static query can give you.

In this lesson, we pass use `useQuery`'s configuration object to pass variables into our GraphQL Query. 

Urql will execute the same query with new variables whenever it detects that one of the variables it is passing to Graphql has changed.

Pass Parameters to urql's useQuery React Hook

We look at how to use `useMutation` from urql to run a GraphQL mutation query. 

`useMutation` accepts a Graphql mutation as a string and passes the result and function to execute the query back in an array. This function can be called as many times as you like, passing variables the GraphQL query has defined.

Write a GraphQL Mutation using React Hooks with Urql

In this lesson, we set up our `urql` client with GraphQL subscriptions. 

`Urql` doesn't support subscriptions by default. We import the `subscriptionExchange` along with `defaultExchanges` to pass to our `urql` client. Next, we import `SubscriptionClient` from `subscriptions-transport-ws` which takes a websocket URL.

Set Up GraphQL Subscriptions with Urql

In this lesson, we use urql's `useSubscription` hook to subscribe to a GraphQL subscription. 

We write a GraphQL subscription query and pass it to `useSubscritpion` which returns the result of the subscription we pass it. 

Write a GraphQL Subscription with React Hooks using Urql

In this lesson, we create an urql client with the `createClient` method. Once we provide the `createClient` our GraphQL endpoint, we pass the client to urql's `Provider` component so that the urql can be used in our application.

Set up an Urql GraphQL Provider in React

In this lesson, we are going to install `graphql-tag` to enable syntax highlighting to our [GraphQL query](https://egghead.io/courses/graphql-query-language). `graphql-tag` parses your query and stores it as an AST. `graphql-tag` caches the parsed query, so it won't have to parse it multiple times. 

Install graphql-tag to Enable Syntax Highlighting For GraphQL Queries

We learn about the default `cacheExchange` that urql provides. The default `cacheExchange` is a document cache. Document cache's hash the query and variables as the key as store the result under that key. 

Urql's `cacheExchange` has multiple request policies:
- cache-first
- cache-only
- network-only
- cache-and-network

`cache-first` is the default request policy.

Understand Urql's Document Cache Exchange and Request Policies

The first thing you need to do is add the `data-controller` attribute the to html that you want to connect to Stimulus.

We added `data-controller="example"` so Stimulus expects an `example_controller.js` file to exist.

In our ExampleController class, we are going to use the `connect` method to show that we've connected our controller to the dom.

Topics

Instructors

Content Type

Free or Pro