 Resources from Josh Black in 2021

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.

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

Build a GraphQL Server

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

Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look at React's lifecycle methods, using them to bootstrap d3's force layout in order to render our visualization. 

Creating a D3 Force Layout in React

In this video, we’ll take a look at the GraphQL Language and write out our first GraphQL Schema. We’ll use the `graphql` package available to us through `npm` to parse our `graphql` language file and resolve our initial query.

Create a GraphQL Schema

When we have certain mutations that require more complex input parameters, we can leverage the Input Object Type in GraphQL. In this video, we’ll learn how to create an Input Object Type and how to add it to a GraphQL Mutation Type.

Create an Input Object Type for Complex Mutations

We can create the most basic components of our GraphQL Schema using GraphQL's Object Types. These types allow us to group related fields together under a specific type, such as a Video or a User, and then allows us to fetch these types when we query our schema. In this video, we'll learn how to write GraphQL Object Types in GraphQL's Schema language, as well as how to create resolvers for them, and ultimately how to query them.

Use GraphQL's Object Type for Basic Types

If we have a GraphQL Schema expressed in terms of JavaScript, then we have a convenient package available to us that let’s us easily serve up our schema on any endpoint in an Express Server. In this video, we’ll use the `express-graphql` package to serve up our GraphQL Schema as middleware, and also learn how to enable the GraphiQL tool in order to query our GraphQL Schema.

Serve a GraphQL Schema as Middleware in Express

In GraphQL, every field and nested object is able to take in arguments of varying types in order to do common operations like fetching an object by it's ID, filtering, sorting, and more. In this video, we'll update a field to take in an id argument and then learn how to use that argument in our resolve method to fetch a video by its id.

Use Arguments in a GraphQL Query

When working with collections of things in GraphQL, we'll always reach out for the `GraphQLList` Type. In this video, we'll learn how to use GraphQLList from the `graphql` package in combination with a `GraphQLObject` Type to create a field that returns a collection in our Schema.

Use GraphQLList with GraphQLObject Types

In order to handle collections of items in a GraphQL Schema, GraphQL has a List Type. In this video, we’ll learn the syntax for specifying a List of items in a GraphQL Schema.

Use GraphQL's List Type for Collections

In order to properly traverse through collections, Relay-compliant servers require a mechanism to page through collections available in a GraphQL Schema. In this video, we’ll create a `Connection` type from an existing GraphQL List Type and learn how to access edge information from each collection.

Convert GraphQL List Type to a Relay Connection Type

The GraphQL Relay Specification requires that a GraphQL Schema has some kind of mechanism for re-fetching an object. For typical Relay-compliant servers, this is going to be the `Node` Interface. In this video, we’ll add in the `Node` interface to a GraphQL Schema by using the helpers available in the `graphql-relay` `npm` package.

Add a Relay Node Interface to a GraphQL Schema

Writing out a GraphQL Schema in the common GraphQL Language can work for simple GraphQL Schemas, but as our application grows, or when we start using more complex types like interfaces or unions, we find that we can’t use a GraphQL Language file in the same way as before. In this video, we’ll learn how to translate a GraphQL Schema written in GraphQL into a GraphQL Schema written in JavaScript.

Write a GraphQL Schema in JavaScript

In order to change the data that we can query for in a GraphQL Schema, we have to define what is called a `mutation` in GraphQL. Mutations allow us to specify ways to create, update, and delete data. It also provides a way to fetch information after the mutation occurs. In this video, we’ll learn how to create a Mutation Type in GraphQL and specify the information we want returned.


Write a GraphQL Mutation

As we start building out more complex GraphQL schemas, certain fields start to repeat across different types. This is a perfect use-case for the Interface Type made available to us through GraphQL’s Type System. In this video, we’ll go over how to create an Interface Type and how to add it to an existing type in a GraphQL Schema.

Add an Interface to a GraphQL Schema

In order to support mutations in Relay, there is a requirement that the GraphQL Server exposes mutation fields in a standardized way. This standard includes a way for mutations to accept and emit an identifier string, allowing Relay to track mutations and responses. In this video, we’ll learn how to use a helper available to us through `graphql-relay` to create Mutation fields that accept `clientMutationId`’s.

Use Relay’s Input Object Mutations

GraphQL’s Type System has support for a number of Primitive Types that we can use in our GraphQL Schema definitions. In this video, we’ll take a look at String, Boolean, Int, Float, and ID and how to incorporate them into a GraphQL Schema Definition.

Use GraphQL Primitive Types

While certain fields in a GraphQL Schema can be optional, there are some fields or arguments that are necessary in order to either fulfill a query, or to provide a guarantee to people using the Schema that some field exists. In this video, we'll take a look at turning an argument in a NonNull argument by applying the GraphQLNonNull type in order to guarantee that the given argument is supplied in the query.

Use GraphQLNonNull for Required Fields

flow

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

Primitive Types in Flow

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

Creating a Stateless Functional Component in React

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Up and Running with Facebook Flow for Typed JavaScript

We'll learn how to use GraphQL's GraphiQL tool as an IDE for writing GraphQL queries, covering how to write a query, leverage query variables, perform specific operations, and also how to use the Documentation pane to explore an existing GraphQL schema.

Topics

Instructors

Content Type

Free or Pro

Josh Black