 Resources from Eve Porcello in 2024

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

GraphQL Query Language

GraphQL is a query language for your API that offers a new paradigm for delivering data to clients of all varieties. In this playlist, we’ll build a small fullstack application using GraphQL, Apollo Server, Apollo Client, and React, introducing a multitude of key GraphQL concepts along the way.

We’ll start by building the GraphQL API for a ski day counter application using Apollo Server. Then we’ll immediately send client queries to the GraphQL service to get the data. Later, we’ll incorporate mutations to change data, and we’ll integrate react-apollo to send queries and mutations from React components. Along the way, we’ll introduce useful schema design features like input types, enums, and custom scalars, and we’ll talk about client-side use cases like sending variables and caching. After watching these videos, you’ll be able to work on existing GraphQL projects or start your own with a full command of the fundamentals.

Bite-size video tutorials for badass web developers.

egghead

Create Fullstack Applications with GraphQL and Apollo

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

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

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

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

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

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 

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

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

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

Apollo Server is a GraphQL server that listens for incoming HTTP requests on a single endpoint.  In this lesson, we will stand up a simple GraphQL service that handles a query for total days skied during a season.

Create a GraphQL API with Apollo Server 2.0


One of the first major companies to launch a public GraphQL API was GitHub. In this lesson, we'll send queries to the [GitHub API](https://developer.github.com/v4/explorer/) to view our own data, and we'll get acquainted with some of the core features of the GraphQL query language.

Query the GitHub GraphQL API


With GraphQL, every field and nested object can have a set of arguments which can be used to request very specific data from a GraphQL API. In this lesson, we will pass arguments to the [GitHub API](https://developer.github.com/v4/explorer/) inline and as query variables.

Filter Data Based on Query Arguments with GraphQL

A GraphQL fragment encapsulates a collection of fields that can be included in queries. In this video, we'll look at how to create fragments on types to reduce the amount of typing that needs to occur as queries become more complex. We'll use the [GitHub API](https://developer.github.com/v4/explorer/) to test.

Reuse Query Fields with GraphQL Fragments

GraphQL is a query language for your API, which means that you can query or ask for the data that you need in one request, and you'll get one response as JSON. In this lesson, we'll introduce the key features of GraphQL.

WTF is GraphQL?

Queries get data from GraphQL services. If we want to change data, we will use GraphQL mutations. In this lesson, we’ll look at how to design GraphQL mutations to increment or decrement the number of ski days on record.

Topics

Instructors

Content Type

Eve Porcello