 Courses from Eve Porcello

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

Introspection is the ability to query information about a GraphQL API’s schema. In this lesson, we will write queries that will return information about the pet library schema.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://funded-pet-library.moonhighway.com).

Query a GraphQL API's Types With Introspection Queries

Fragments are selection sets that can be used across multiple queries. They allow you to refactor redundant selection sets, and they are essential when querying unions or interface types. In this lesson, we will improve our query logic by creating a fragment for the activity selection set.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).

Reuse GraphQL Selection Sets with Fragments

In this lesson, we’ll look at a refactored Pet Library which includes a range of new queries that aim to minimize argument usage and naming collisions that require aliases. To follow along with these queries, go to the [Pet Library GraphQL Playground](https://funded-pet-library.moonhighway.com).

Explore Refactored GraphQL Queries

Interfaces are similar to Unions in that they provide a mechanism for dealing with different types of data. However, an interface is more suited for data types that include many of the same fields. In this lesson, we will query different types of pets. 

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://funded-pet-library.moonhighway.com).

Query GraphQL Interface Types in GraphQL Playground

Unions are used when we want a GraphQL field or list to handle multiple types of data. With a Union Type, we can define a field that could resolve completely different types of data. In this lesson, we will write a query that obtains a list of different pet types

Query Lists of Multiple Types using a Union in GraphQL

Some GraphQL queries will have arguments. Arguments can be used to send additional options about the data set that you wish to receive. They may be used to specify sorting preferences, limit the number of records returned, or filter data. In this lesson, we will filter a list of pets by status.
	
To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Filter a GraphQL Query Result Using Arguments

One of the most useful features of a GraphQL query is that you can collect data about multiple types in one request. In this video, we'll look at how to use nested fields to gather data about the Customer type and the Pet type.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).

Query Connected Data with the GraphQL Query Language

If there are multiple GraphQL queries in the same query document, you need to give the query an operation name. In this lesson, we’ll show how to get around anonymous operation errors with operation names.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Create Operation Names for GraphQL Queries 

Mutations are another type of GraphQL operation that are similar to queries, but they are used when you need to change any data on the backend. In this lesson, we will send mutations to register new users.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Use an Input Type to Create an Account with a GraphQL Mutation 

Following up on the `checkOut` mutation from the previous video, we’ll take a closer look at how to check in a pet using a pet id. Then we’ll look at the `allCustomers` query and find out the history of pet checkouts for all customers.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).

Change Check In Status with a GraphQL Mutation

A GraphQL API can push new data to the client with the Subscription Type. In this lesson, we’ll listen to checkIn and checkOut mutations in real time.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://funded-pet-library.moonhighway.com).

Listen for Data Changes in Real-time with a GraphQL Subscription

The GraphQL Playground is an IDE for interacting with a GraphQL API. GraphQL APIs have a single endpoint. Queries are used to request specific data from that endpoint. In this lesson, we will send a query to obtain the total number of pets registered at the [Pet Library](https://pet-library.moonhighway.com).

Send a Query with GraphQL Playground

In addition to returning lists or scalar values, it’s possible to return GraphQL objects from fields. In this lesson, we’ll take a closer look at the `Photo` type and how it can be used to store more complex data types.
	
To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Send a Nested GraphQL Query

When writing GraphQL queries, you may want to query the same field with different arguments. In this lesson, we’ll show the problem with naming collisions in GraphQL queries and how they can be solved with aliases.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Renaming Fields with GraphQL Aliases

If you want to pass dynamic arguments to a GraphQL query, you can do so with GraphQL query variables. In this lesson, we’ll replace static or inline values with dynamic values and pass data as JSON to the query from the Query Variables panel.
	
To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Use Variables to Filter a Query Result with GraphQL

Mutations give you the ability to invoke backend functions from the client. In this lesson, we will use a mutation to authenticate a user with their username and password. Authorized users will receive a token that can be used to identify the current user in future operations.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).

Authenticate a User with a GraphQL Mutation

Once logged in, the user will be able to check out pets with a checkOut mutation. In this lesson, we’ll look at how to send a mutation based on current data.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).

Send a checkOut Mutation with GraphQL as an Authorized User

Now that we understand how to write a simple query to check a total value, we're going to write a query to return a list of pet objects. Along the way, we'll learn a bit more about the GraphQL query language, tackling vocabulary like selection sets and fields. All of the queries are sent to the [Pet Library API](https://pet-library.moonhighway.com).

Query a List of Objects with GraphQL

In the GraphQL Query Language, an enum or enumeration type is a restricted list of values for a particular field. We'll query an enum field, category, in this lesson to find out the different pet categories. This lesson also takes a look at the GraphQL schema for the API.

To follow along with these queries, go to the [Pet Library GraphQL Playground](https://pet-library.moonhighway.com).


Query an Enumeration Type with GraphQL

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

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

GraphQL mutations are used to change data and can be also used to delete data. In this lesson, we’ll make changes to the removeDay mutation to delete a day from the ski days array by id. Additionally, we’ll return a custom type when we send the mutation.

Remove Items from an Array with a GraphQL Mutation

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

Eve Porcello

Search Results