 Resources from Alex Banks in 2024

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

To query a GraphQL API, all you need to do is send an HTTP request that includes the query operation in the body of the request. In this lesson, we will use the browser’s fetch method to request the total days skied from our GraphQL API.

Fetch Data from a GraphQL API

Created by the team at Prisma, graphql-request is a lightweight package that can be used to send queries to any GraphQL API. Sending a request with graphql-request uses less syntax than a fetch request. In this lesson, we will query the totalDays field using this helper package.

Query a GraphQL API with graphql-request

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 Apollo is a component library that we can use to rapidly build GraphQL client applications with React. In this lesson, we get our React app ready by setting up the Apollo Provider and sending our query using the Query component.

Set Up a React GraphQL Client Application with react-apollo

Apollo Client allows you to build performant, production-ready applications that consume data from GraphQL services. In this lesson, we will query the totalDays field using Apollo Client.

Send a GraphQL Query with Apollo Client

The Query component is used to render the state of the network request along with the data that is returned from the GraphQL API. In this lesson, we will refactor our application to include an App component that displays the resulting count returned by the totalDays field.

Display Query Results using the Query Component 

React Apollo comes with a Mutation component that can be used to send mutation operations to a GraphQL API. In this lesson, we will use the Mutation component to trigger addDay and removeDay mutations.

Increment a Value with the Mutation Component

Apollo Client comes with a local cache. The cache is where Apollo Client saves query results. You can read directly from or write directly to the cache which will allow you to reduce the number of network requests that your application makes. In this lesson, we will write the mutation results directly to the cache using the writeQuery method.

Update the Local Apollo Cache after a Mutation Using writeQuery

GraphQL APIs resolve data lists as arrays. In this lesson, we will display the list of ski days in the browser using a table.

Display a Data List with the React Apollo Query Component

Apollo Client comes with tools to assist with handling errors that may have occurred during a GraphQL request. In this lesson, we will demonstrate how to use the onError property of the Mutation component to display an error to the user.

Handle GraphQL Errors with Apollo Client

Introspection provides the ability to query information about a GraphQL schema. In this lesson, we will build the form for adding ski days. Inside the form, we will use introspection to obtain the values of conditions enumeration type. We will use these conditions inside of a form select component.

Query Enumeration Values from a GraphQL API

We can send variables to any GraphQL operation and using React Apollo, we can send these variables via the Mutation Component. In this lesson, we will collect data about a ski day from a from and send it to the addDay mutation as variables.

Use the React Apollo Mutation Component with Input Arguments 

We can read data from and write data to the cache directly with Apollo Client. In this video, we’ll update the UI by interacting with the cache instead of sending an additional request to the GraphQL server.

Update the Apollo Local Cache with the readQuery and writeQuery Methods

The Mutation Component is what is used to trigger mutations from a user interface. In this lesson, we will add a remove button to each table row that allows users to remove records with a mutation.

Topics

Instructors

Content Type

Alex Banks