Vuex-ORM GraphQL安装故障

Question

我使用Laravel/GraphQL将Vuex-ORM Graphql插件安装到现有的Nuxt项目中，这样我就可以尝试避免使用阿波罗缓存。不过，在我的一个组件中，我正在运行：

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

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

但是，我正在接收错误[vuex] unknown action type: entities/notifications/fetch。

我查看了调试日志，发现了几个可用的getter(实体/通知/查询、实体/通知/所有、实体/通知/查找和实体/通知/findIn)。我尝试在删除错误的挂载方法中运行等待Notification.all()，但是在Vuex中查找通知数据对象是空的。

下面是我设置的其余部分：

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"

Answer 1

因此，在万福玛丽投掷，使这一工作，我最终作出了一些改变，实际上是有效的！

如果其他人遇到类似的问题，我就是这么做的.在我的nuxt.config.js中，交换了两个插件的顺序如下：

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

在我的graphql.js插件中，我重新安排了选项的顺序(首先是数据库，然后是适配器)：

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