Headless Craft CMS

Element API and JSON

Introducing the Element API Plugin and a quick refresher on JSON.

Here are all of the videos in Headless Craft CMS:

1 Introduction Let's take a few minutes to review what we'll cover in this course. 02:10
2 What We'll Cover Let's take a few minutes to review what we'll cover in this course. 02:35
3 What is Headless? There are a lot of opinions about what a headless CMS is and is not. Here's my take. 04:09
4 Element API and JSON Introducing the Element API Plugin and a quick refresher on JSON. 04:30
5 Installing the Element API Plugin The Element API requires a first-party plugin, which is convienently available in the Craft Plugin Store. 02:04
6 Defining an API Endpoint Let's start our API by defining an endpoint. 01:51
7 Accessing Entries in the API How to expose Entry elements via the Element API. Almost as if it is what it was made for! 06:25
8 Accessing the API with JavaScript With a basic endpoint done, let's access that data and use it in some JavaScript. 08:36
9 Adding an Entry Endpoint A good REST API will have multiple endpoints. Let's build one that exposes the full content of an entry so we don't have to expose all of the entry data in a single API endpoint. 05:55
10 Accessing Assets in the Element API Moving on to more Elements, let's review how we can access and expose Asset Elements in the Element API. 09:45
11 Accessing Assets in Elements in the Element API Assets are typically used in the context of Entries. Let's look at how we can access the Assets and expose the data in the API. 12:57
12 Using the Assets Endpoint with JavaScript Now that we have our Assets API ready, let's test it with some JavaScript code. This time we'll use a Vue.js slideshow app. 07:36
13 Accessing Global Sets in the Element API Next up we learn how to access Globale Sets in the Element API. 04:45
14 Accessing Matrix Blocks in the Element API A Matrix field takes a little bit of extra work to make available in the Element API but it's still straight-forward. 08:37
15 Introduction to GraphQL We talk about what GraphQL is and a general idea of how it works. 10:40
16 Installing GraphQL via CraftQL Now that we're done talking about GraphQL, let's install it via CraftQL and starting using it. 07:57
17 GraphQL Queries Basics on how to formulate a GraphQL query, fetch some Craft entries, and set and use a variable. 08:17
18 Entry Types and Parameters in GraphQL We cover how to output data based on entry type and use parameters in a query. 09:47
19 Querying Global Sets in GraphQL Like we did earlier with the Element API, let's look at how we can access Globall Sets via GraphQL queries. 03:19
20 Querying Matrix Elements in GraphQL Just like we did with the Element API, let's access a Matrix field (inside of a Global Set) via GraphQL. 03:29
21 Using Vue.js, Apollo Client, and GraphQL We use the GraphQL client Apollo and learn how to build a list of recent posts from Craft. 09:44
22 Auth and Restricting Access in Element API and GraphQL To wrap up the course, we look at ways we can protect our API endpoints. We use some custom code for the Element API and review tokens in CraftQL. 17:25

Dozens of Courses Are Waiting

Invest in yourself, your career, and your ability to take knowledge and use it grow your business or earning potential.

Get everything in the catalog plus new videos every week. Just by signing up you get immediate access to hundreds of hours of learning.

Start CraftQuest

Image