Advanced VueJS: Build Better Applications Efficiently/

...

/

Using GraphQL

Using GraphQL

Learn how to use GraphQL with Vuex, and try it yourself.

We'll cover the following...

GraphQL is an API standard that has taken the development world by storm. It allows apps to fetch only the necessary data and receive them as a graph. The GraphQL syntax has very little noise overall and is human-readable.

How GraphQL queries work

In short, GraphQL is a syntax to communicate with an API. It's agnostic from any server technology, and we can integrate it into existing applications and data structures. GraphQL knows two different kinds of operations—queries and mutations. We use queries to fetch data and mutations to alter it. For example, a query to fetch a list of posts with the title and body text would look like the widget below:

Press + to interact
{
  posts {
    title
    bodyText
  }
}

To prevent over-fetching, we can specify only the fields we need. GraphQL lets us do that. To fetch every post's author with the posts, we would alter the query, as illustrated below:

Press + to interact
{
  posts {
    title
    bodyText
    author {
      name
    }
  }
}

We can ...