(Photo by rawpixel)

The Vuex-ORM GraphQL Plugin and this article are powered by i22 Digitalagentur.

Since my first post about the Vuex-ORM GraphQL Plugin in may some time has passed and while that, a lot of changes have been introduced. In this article I want to show you what cool new features we got, what has changed and where we're going.

Renaming of the plugin

First of all we renamed the plugin to have a consistent naming across all the Vuex-ORM the plugins. The Plugin is now called Vuex-ORM/Plugin-GraphQL and thus the NPM package is named @vuex-orm/plugin-graphql.

Moving ahead 1.0.0

To make clear, that we are approaching a stable API, I'm currently releasing Release Candidates for 1.0.0. While writing this article we already have RC 21.

In parallel the Maintainers of Vuex-ORM and the plugins are talking about a consistent API across all persistence plugins. When this API specification is finished, we're ready for 1.0.0. Please keep in mind that until finishing the spec, the API of the Plugin will probably change. I'll keep you up to date.

Convenience methods

We got clean a API with convenience methods now. No more calling dispatch(), instead you can use fetch(), $persist(), $deleteAndDestroy() and many more!

Support for response mocking in unit tests

One of the latest RC versions brought response mocking support for Vue Unit Tests of components, that interact with the GraphQL server.

Please check the testing section in the documentation for details.

GrpahQL schema analyzing

When the first query or mutation to the GraphQL API is sent, the plugin sends a introspection query to the API, downloads the schema, analyzes it and extracts different information like the types of the fields to use, which fields to ignore, because they're not in the schema and whether custom queries and mutations return a connection or a record.

Further it detects differences between the Vuex-ORM model definitions and the schema and logs warnings.

In the future there will probably be more smart consulting of your GraphQL schema, we're open for suggestions.

Support for different API designs

Due to the fact that there is no fixed way to design a GraphQL API and there are at least 3 ways how connections could look like, the plugin now brings support for all of them, via a connectionMode setting. This will be automatically determined by analyzing the schema, so you don't have to configure anything. However, if that fails, you can explicitly overwrite the connection mode via config.

Checkout the documentation to see what connection types are supported.

In the future the plugin will get even more flexible and allows the developer to change the naming of the C(R)UD mutations. Stay tuned.

Support for custom queries and mutations

Because not all mutations are Create/Update/Delete and because not all queries can be generated automatically, the plugin now also supports custom queries and mutations. Either related to a model or not.

Take a look a the documentation to get an idea how to use custom queries and mutations

Support for HTTP headers

Setting HTTP headers either static when initializing the plugin or dynamic by passing a function is the key to setup Authentication mechanisms and a often requested feature. The plugin supports this now!

Lots of bugfixes and documentation improvements

Along with those changes came a big bunch of bugfixes, improvements both for the code and the documentation.

I also reduced the number of dependencies of the plugin to 1 (!). Which is a very slim signature for a NPM package :)

SSR Support

Support for server side rendering and Nuxt.js is experimental since RC 21. Please give feedback if it works for you!

As you can see, we got same pace in the project and we're approaching version 1.0.0 very quickly. You're invited to join our support slack channel or open a GitHub issue. We love to hear your feedback!

This OpenSource project is build with ❤️ at i22