There’s a problem with using traditional REST APIs: we always get the same server response for a given endpoint.

This lack of flexibility can lead to two equally annoying issues:

1. Over-fetching data — when we get a huge response but only need a small piece of it.
2. Under-fetching — when we perform the first call only to receive a small piece of what we need. This can lead to chaining API calls and fetching even more unnecessary data in an attempt to get what we need.

Wouldn’t it be great instead if we could shape the response we get with the request we make, and fetch only what we need, when we need it? Fortunately that is possible with GraphQL, a modern way to build and query APIs.

In Vue Mastery’s GraphQL course, we will be creating a Vue + GraphQL app together to gain the confidence of using this powerful, modern tool.

Understanding its unique benefits

In a nutshell, GraphQL is a syntax that describes how to ask for data, and it’s generally used to load data from the server.

One of the core features and the biggest benefits of GraphQL is that you get only the data you asked for. Unlike with a REST API, where the shape of the API call response is defined on the server, with GraphQL this is done on the client side. This allows us to make a single request to fetch all required information and nothing else, instead of making subsequent REST API calls.

To understand this difference better, let’s look at an example where we’ll compare fetching data from GitHub using both REST and GraphQL APIs. 

What to expect from the course

Now that we are starting to understand how GraphQL provides a unique ability to query our data, how do we work with it on the frontend? We could use POST requests, but it’s more convenient to use one of the GraphQL clients.

In this course, we will be focusing on Apollo Client and its Vue integration: VueApollo. We’ll learn how to fetch and change data on the server, how to work with real-time subscriptions, and even learn how you can replace your local state management tool like Vuex with a built-in Apollo Client cache.

To get the most out of this course, you’ll need a solid understanding of Vue itself and the Vue CLI, as well as a fundamental understanding of the Composition API. So if you’re ready to start feeling confident plugging GraphQL into your Vue apps, I’ll see you in the next lesson.

Lessons:

• Intro to GraphQL
• Fetching data with queries
• Fetching data with queries
• Query variables, handling loading and errors
• Advanced queries
• Updating data with mutations
• Bonus: Q&A with Natalia Tepluhina
• Manual cache updates and optimistic responses
• Real-time updates with subscriptions
• Setting up local state with Apollo Client
• Modifying local state with Apollo Client