graphqlvuexvuex-orm

Vuex-ORM GraphQL installation troubles


I installed the Vuex-ORM Graphql Plugin into an existing Nuxt project with Laravel/GraphQL API, so that I could try avoiding using the Apollo Cache. In one of my components though, I'm running:

<script>
  import Notification from '~/data/models/notification';

  export default {
    computed: {
      notifications: () => Notification.all()
    },
    async mounted () {
      await Notification.fetch();
    }
  }
</script>

however I'm receiving the error [vuex] unknown action type: entities/notifications/fetch.

I looked through the debug log and found several available getters (entities/notifications/query, entities/notifications/all, entities/notifications/find, and entities/notifications/findIn). I tried running await Notification.all() in the mounted method which removed the error, however looking in Vuex the Notifications data object is empty.

Here is the rest of my setup:

nuxt.config.js

plugins: [
  '~/plugins/vuex-orm',
  '~/plugins/graphql'
],

plugins/vuex-orm.js

import VuexORM from '@vuex-orm/core';
import database from '~/data/database';

export default ({ store }) => {
  VuexORM.install(database)(store);
};

plugins/graphql.js

/* eslint-disable import/no-named-as-default-member */
import VuexORM from '@vuex-orm/core';
import VuexORMGraphQL from '@vuex-orm/plugin-graphql';
import { HttpLink } from 'apollo-link-http';
import fetch from 'node-fetch';
import CustomAdapter from '~/data/adapter';
import database from '~/data/database';

// The url can be anything, in this example we use the value from dotenv
export default function ({ app, env }) {
  const apolloClient = app?.apolloProvider?.defaultClient;
  const options = {
    adapter: new CustomAdapter(),
    database,
    url: env.NUXT_ENV_BACKEND_API_URL,
    debug: process.env.NODE_ENV !== 'production'
  };

  if (apolloClient) {
    options.apolloClient = apolloClient;
  } else {
    options.link = new HttpLink({ uri: options.url, fetch });
  }

  VuexORM.use(VuexORMGraphQL, options);
};

/data/adapter.js

import { DefaultAdapter, ConnectionMode, ArgumentMode } from '@vuex-orm/plugin-graphql';

export default class CustomAdapter extends DefaultAdapter {
  getConnectionMode () {
    return ConnectionMode.PLAIN;
  }

  getArgumentMode () {
    return ArgumentMode.LIST;
  }
};

/data/database.js

import { Database } from '@vuex-orm/core';

// import models
import Notification from '~/data/models/notification';
import User from '~/data/models/user';

const database = new Database();
database.register(User);
database.register(Notification);

export default database;

/data/models/user.js

import { Model } from '@vuex-orm/core';
import Notification from './notification';

export default class User extends Model {
  static entity = 'users';

  static eagerLoad = ['notifications'];

  static fields () {
    return {
      id: this.attr(null),
      email: this.string(''),
      first_name: this.string(''),
      last_name: this.string(''),

      // relationships
      notifications: this.hasMany(Notification, 'user_id')
    };
  }
};

/data/models/notification.js

import { Model } from '@vuex-orm/core';
import User from './user';

export default class Notification extends Model {
  static entity = 'notifications';

  static fields () {
    return {
      id: this.attr(null),
      message: this.string(''),
      viewed: this.boolean(false),

      // relationships
      user: this.belongsTo(User, 'user_id')
    };
  }
};

package.json

"@vuex-orm/plugin-graphql": "^1.0.0-rc.41"

Solution

  • So in a Hail Mary throw to get this working, I ended up making a couple of changes that actually worked!

    If other people come across this having similar issues, here's what I did... In my nuxt.config.js, swapped the order of the two plugins to this:

    plugins: [
        '~/plugins/graphql',
        '~/plugins/vuex-orm',
    ],
    

    In my graphql.js plugin, I rearranged the order of the options to this (database first, followed by adapter):

    const options = {
      database,
      adapter: new CustomAdapter(),
      url: env.NUXT_ENV_BACKEND_API_URL,
      debug: process.env.NODE_ENV !== 'production'
    };