# Introduction

Vuex-ORM/Plugin-GraphQL is a plugin for the amazing Vuex-ORM, which brings Object-Relational Mapping access to the Vuex Store. Vuex-ORM-GraphQL enhances Vuex-ORM to let you sync your Vuex state via the Vuex-ORM models with your server via a GraphQL API.

The plugin will automatically generate GraphQL queries and mutations on the fly based on your model definitions and by reading the GraphQL schema from your server. Thus it hides the specifics of Network Communication, GraphQL, Caching, De- and Serialization of your data, and so on from the developer. Getting a record of a model from the server is as easy as calling Product.fetch(). This allows you to write sophisticated Single-Page Applications fast and efficient without worrying about GraphQL.

WARNING

You should have basic knowledge of GraphQL, Vue, Vuex and Vuex-ORM before reading this documentation.

Actions
Example usage
Adapters
License

# Actions

While using Vuex-ORM with the GraphQL plugin you have to distinguish between two types of Vuex actions:

Vuex-ORM actions: Retrieve data from or save data to Vuex (Vue Component <--> Vuex Store)
Persistence actions: Load data from or persist data to the GraphQL API (Vuex Store <--> GraphQL Server)

The following table lists all actions and what they do:

CRUD	Vuex Only	Persist to GraphQL API
READ	`find()`, `all()`, `query()`	`fetch()`
CREATE	`create()` or `insert()`	`$persist()`
UPDATE	`$update()`	`$push()`
DELETE	`$delete()`	`$destroy()`

See the example below to get an idea of how this plugin interacts with Vuex-ORM.

# Example usage

After installing this plugin you can load data in your component:

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{user.name}}

      <a href="#" @click.prevent="destroy(user)">x</a>
    </li>
  </ul>
</template>


<script>
  import User from 'data/models/user';

  export default {
    computed: {
      /**
       * Returns all users with reactivity.
       */
      users: () => User.query().withAll().all()
    },


    async mounted() {
      // Load all users from the server
      await User.fetch();
    },


    methods: {
      /**
      * Deletes the user from Vuex Store and from the server.
      */
      async destroy(user) {
        await user.$deleteAndDestroy();
      }
    }
  }
</script>

TIP

This plugin works with the Apollo Dev Tools!

# Adapters

It seems that there are several standards within the GraphQL community how the schema is designed. Some do connections via a nodes field, some via a edges { nodes } query and some do neither of them. Some work with Input Types and some with plain parameter lists. This plugin supports all of them via a adapter pattern. There is a default adapter and all example queries in this documentation are generated by the DefaultAdapter but that doesn't mean the queries are tied to this format. When you have to customize it, you'll find how to do so in the respective chapter.

# License

Vuex-ORM-GraphQL is open-sourced software licensed under the MIT license.

Setup →