 Resources from Nik Graf in 2021

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.

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

Designing GraphQL Schemas

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.

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

GraphQL Data in React with Apollo Client

Many languages work on a compilation story to WebAssembly, but Rust is already ready for primetime. Why?


- Rust is a stable language and great replacement for C and C++. 
- Due to the reference and borrowing concept, Rust doesn’t need a Garbage Collector and can be used for a production-ready WebAssembly project. 
- The Rust/Wasm team has built some sophisticated tooling for straightforward interoperability between Rust and JavaScript.

This course gives you the tools to compile to WebAssembly with Rust. Over 11 lessons, we’ll set up a project and explore various paths of communication and interoperability between Rust and JavaScript.

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rust

Using WebAssembly with Rust

The core of serverless architectures are auto-scaling systems and a pay-per-execution pricing. Two traits that allows developers to significantly reduce operational cost and complexity, by outsourcing infrastructure management to cloud providers and focus on building business logic.  

In this course we walk through the basics on how to create a serverless API. We start off creating a simple HTTP endpoint. Then we build the first two endpoints of a REST API for a simple Todo Application backend storing the data in DynamoDB. After watching this course you will be ready to get started building you first serverless backend.

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.

Develop a Serverless Backend using Node.js on AWS Lambda

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

Get Started with Reason

In this course we will explore the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific concept or component that comes with React VR. This guide covers a large surface area of experiences like teleporting a user to a recorded 360° experience as well as placing them in virtual worlds. Even a combination of both is possible. Each lesson is independent, but some require knowledge explained in a previous lesson.

Build Virtual Reality Experiences Using React VR

React 16 comes with some powerful new features, in this course we'll be exploring each of them. Each lesson is going to go over every individual new feature, one at a time.
From the new error boundaries that will save us many a headache to handling whether to update our state *within* our `setState` 

We won't just be learning the technical capabilities of the new features however, we'll *also* be going into best practices. 

Once you watch this course you'll be more than ready to leverage everything React 16 has to offer! 

Leverage New Features of React 16

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Whenever I need to make a change to a file that includes a part I don't grasp I try to gather as much informations as possible. One tool that turned out to be very helpful to build up context was seeing who wrote the code & when.

In this lesson I demonstrate you how this can easily be achieved using the VS Code GitLens extension and how to set it up in a way that it's not constantly bothering you.

Get Git Blame insights directly in VS Code using GitLens

Cascading Style Sheets bring order and beauty to our applications.

The CSS keyword `currentColor` allows you to set the color of all sorts of CSS properties like background-color, border-color, stroke, fill to the current font color. In this lesson we demonstrate this setting the stroke of an SVG to `currentColor`.

`currentColor` is well supported by all browser vendors. Even IE9 has it as you can see here: https://caniuse.com/#feat=currentcolor



Leverage the CSS keyword "currentColor" to ensure a SVG stroke inherits the Font Color

GraphiQL Spark is convenience layer on top of GraphiQL allowing you to run queries or mutations completely client side. In addition the query/mutation response is rendered once GraphiQL is mounted, which makes it ideal for blog posts.

In this lesson we start from an empty create-react-app and add a GraphiQL Spark example.

You can find more examples of GraphiQL Spark at the documentation: https://nikgraf.github.io/graphiql-spark/

Use GraphiQL Spark to demo a GraphQL schema without an endpoint

When iterating on new GraphQL schema, it is great to have a server implementation allowing you to only provide type definitions and the server returning mocked results. This enables you to quickly iterate on ideas and verify them with example queries.

Apollo Server offers this by enabling the mocked mode. In this lesson create a new server with mocking enabled, customize mocks and walk through how to combine mocks with resolvers.

This setup then will be the basis for our schema design explorations. Let me add that while Apollo Server works well for this case, any other GraphQL server might do as well.


Setup an Apollo GraphQL Server with automatic Mocking 

When it comes to designing GraphQL schemas it's important to first understand what good design means.

For once it's definitely to have queries, mutations and types **driven by the business domain** in order to let developers build the desired use-cases with ease. Nevertheless a well designed schema also allows you **extend or change it based on new requirements** without making breaking changes.

In this lesson we will walk through a simple process on how to kick off a schema design process based on wireframes or UI designs. In combination with a set of solid conventions this will help you to get started, but still be able to iteratively improve your schema.


Kicking off a GraphQL Schema Design Process

While it's very appealing to pick a short and crisp name for a field, not naming the things exactly what they are can cause issues and confusion in the long run.

In this lesson we walk through one example in detail and see what issues a wrong naming decision can cause. After that we walk through a couple more example to get a better feeling of the recommended convention.

Naming Conventions for Query Fields in GraphQL

In GraphQL every field is nullable by default. While not ideal for the developer experience when consuming a GraphQL Schema with a client, this was a conscious decision by the creators of GraphQL. 

In this lesson we explore the background for this decision which will cover the following areas:

- Error handling
- Authorization
- Deprecations during Schema Migrations


When and Why to use Nullable vs Non-nullable Fields in GraphQL

While it's certainly possible to version a GraphQL Schema, it's common practice to not do so.

That's fine when just adding new queries or fields, but now and then we want to change a type or remove a field. Leveraging multiple deploys and deprecations we can make breaking changes in a GraphQL schema without affecting a single user.

In this lesson we use one field renaming example to walk through such a multi-step process.

Evolving a GraphQL Schema incl. Breaking Changes without affecting a Single User

Relay comes with a specification and a set of well define conventions for GraphQL Mutations. By following the conventions, we not only design Mutations in a way that they can be extended with easy, but also reduce a lot of cognitive overhead.

We can summarise the conventions into 5 rules:

1. Mutations are named as verbs `createProduct`, `introduceShip`, `deleteCollection`.
2. There must be a single argument input
3. The input type name is the capitalised mutation name with a `Input` postfix e.g. `CreateProductInput`, `IntroduceShipInput`.
4. The returned value is a new custom type that can contain various fields.
5. The return type is name is the capitalized mutation name with a `Payload` postfix e.g. `CreateProductPayload`, `IntroduceShipPayload`.


Mutation Input and Payload Structure in GraphQL

Naming variations can easily be solved by postfixing the name with the variation. This though can quickly lead to a bloated schema, which we want to avoid.

On the contrary by using arguments our schema becomes less flexible.

In such cases GraphQL Aliases become a vital element to enable developers to do the same things as with multiple fields, but without any of the downsides. 

Naming Conventions for Fields with GraphQL Aliases in Mind

A Connection can be extended in multiple ways:

- Fields representing meta information on a entity relationship can be added
- PageInfo itself can be enhanced
- Arguments for filtering or ordering can be applied

In this lesson we walk through all of them to demonstrate the flexibility of the Connection Specification.

Extending GraphQL Connections with additional Fields and Arguments

When naming queries there are almost now rules or recommendations. Nevertheless it's recommended to at least have some conventions in order to reduce cognitive overhead for developers.

In this lesson we explore some the the common best practices.

Naming top-level Query Fields in GraphQL

Being able to resolve related entities in one query is one of the most beneficial features of GraphQL.

While the simples solution often is the best, this doesn't hold up for GraphQL connections. The ideal solution is based on the [Relay Cursor Connections Specification](https://facebook.github.io/relay/graphql/connections.htm).

In this lesson we start based on a simple solution and apply one feature request after another. Eventually we end up with the Connection Specification. 

Paginate Entries using the Connection Specification

In this short clip Nik shares why is story how this course came to be.

Topics

Instructors

Content Type