Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

GraphQL with Laravel and Vue

GraphQL is often looked at as the successor to REST APIs. It provides a powerful query language and allows you to make requests for exactly the information you want, nothing more and nothing less.

Many services now offer GraphQL APIs making it easier for users to interact with their data. With its powerful type system, the syntax is intuitive, and error messages provide helpful feedback. In this series, we’ll take a look at using GraphQL within the Laravel and Vue ecosystem. We’ll build out the obligatory blog as a full-stack GraphQL application. In the backend we’ll make use of the popular lighthouse package which allows us to define our GraphQL schema. In the frontend, we’ll leverage Vue Apollo to allow us to communicate with the backend and display the data in the browser.

Progress

Series Info

Episodes
16
Run Time
2h 56m
Difficulty
Advanced
Last Updated
Jan 4, 2022
Version
Latest
Play Series

Series Episodes

  1. Episodes (1)

    1. Intro and Demo

      We take a look at some existing services that have a GraphQL API and dive right in to see its syntax and query language. We then take a look at the demo application we’ll be building along the way. It’s a blog application that allows us to perform CRUD options on posts, and also has authentication and authorization.
  2. Episodes (3)

    1. Lighthouse Queries for posts

      We start building our blog application and set up our Post model, migration, and relationships. After that, we install and set up the lighthouse package and GraphQL playground to easily make requests. We explore a few directives that allow us to query all posts and single posts.

    2. Lighthouse Mutations for posts

      We continue working with lighthouse and take a look at writing to our posts using mutations. We make use of directives that allow us to create, update and delete posts.

    3. Lighthouse Resolvers

      Whenever any of the built-in directives in lighthouse aren’t enough, we can make use of custom Resolvers and write our own Eloquent queries. We re-create some of our queries using custom resolvers instead.
  3. Episodes (2)

    1. It’s Just an AJAX Request

      If you only need to make one or two requests to a GraphQL endpoint, you can just make use of the tools you’re already familiar with on the frontend. In this video, we make use of the fetch API to grab the posts data from our GraphQL endpoint.

    2. Make Requests from Laravel

      You can also make requests to a GraphQL endpoint from within Laravel itself. In this video, we take a look at using Laravel’s built-in HTTP client to query our GraphQL backend.
  4. Episodes (6)

    1. Vue Apollo Queries

      Let's move on to using Vue Apollo as a dedicated library for handling GraphQL requests on the front-end. We take a look at installing Vue Apollo and then work on queries for grabbing all posts and grabbing a single post.

    2. Vue Apollo Query Components

      An alternate way to perform queries is to make use of Query Components. Everything is done in the template and scoped slots are used to pass any necessary data into the template. Let's take a quick look at this process.

    3. Vue Apollo Mutations

      Let's move on to mutations and work on creating a post. We take a look at using the mutate method to perform GraphQL mutations within our app. We also review how to handle the loading state as well as errors.

    4. Vue Apollo Mutations - Updating Posts

      Let's finish off our CRUD functionality and work on mutations for updating and deleting posts. We also take a brief look at some caching options within Vue Apollo.

    5. Vue Apollo Pagination

      Our backend is already setup to return results with paginated chunks. In our front-end, we have to make sure that we are querying for results based on the page variable in the URL.

    6. Vue Apollo Composition API

      If you're making use of Vue 3 and Vue Apollo v4, you have the option to use the Composition API as well as composition functions to perform your GraphQL queries and mutations.
  5. Episodes (2)

    1. Authentication in Lighthouse

      Let's next review how to perform token-based authentication using Sanctum in a traditional REST API. We then convert the login functionality over to a GraphQL mutation. Finally, we make use of a package to convert all of the auth functionality to GraphQL.

    2. Authentication in Vue Apollo

      In the front-end, we store the token that is generated when the user is logged in. We then make sure to use that token to make requests to protected GraphQL queries.
  6. Episodes (2)

    1. Authorization on the Server

      Let's make sure that we have the proper authorization in place to ensure that logged in users can only perform certain actions.

    2. Authorization Links

      Let's finish up the series by ensuring that links only display if the logged in user's authorization is correct. Thanks for watching!

Continue Learning

Learn Laravel Forge thumbnail

Learn Laravel Forge

With Matt Stauffer

In this series, long-time Laravel Forge advocate Matt Stauffer will teach you how to become a Forge power user. Of course, you'll learn how to provision servers in seconds, but you'll also learn about zero-downtime deployments, processes, queues, securing sites with SSL, database backups, networks, and more!Each episode is bite-sized, so feel free to jump around to the topic that interests you most. Let's go!

  • 23 Episodes
Vue State Management thumbnail

Vue State Management

With Sabatino Masala

State management is at the heart of every Vue application, but exactly how you manage that state can sometimes be...confusing. So let's explore your options! We'll start with the basics, like props and events, before moving on to provide/inject, custom composables, and Pinia. Along the way, we'll tackle practical, real-world scenarios. By the end, you'll know exactly which approach to use and when, so your apps stay clean, organized, and fun to work on.

  • 13 Episodes
Running Clock thumbnail

Running Clock

With Simon Vrachliotis

Welcome to "Running Clock," my new interview series where I fire off questions to top developers about their favorite tools, frameworks, and coding obsessions. The catch? We only have five minutes to get through all of my questions...and the clock is ticking!

  • 11 Episodes
Supercharged Search with Typesense thumbnail

Supercharged Search with Typesense

With Jeffrey Way

Typesense is a wildly fast, open-source search engine that doesn't require a PhD to configure and query. Its API just makes sense. Even better, it integrates seamlessly with Laravel, thanks to the official Typesense PHP client and Laravel Scout.I spent months researching and preparing this course so that you can update your app with powerful Typesense-backed search in record time. Let's go!

  • 22 Episodes
Programming Terms Explained thumbnail

Programming Terms Explained

With Jeremy McPeak

In this series, we'll do things just a little bit differently. Let's take a step back from our code editors and instead review some fundamental technology and software development terms. I'm willing to bet that there are certain bedrock terms that you somehow accidentally skipped over and never learned properly.Let's fix that! Each episode below will focus on a single topic, condensed to the essentials, and animated to perfection for your enjoyment.

  • 12 Episodes