Saving data into vuex coming from django-graphene backend.

[andreisima]

Hi,

First of all thank you for vuex-orm. For me is just a dream come true to be able to replicate a part of back-end data to front-end and using vuex-orm-graphql to be able to do int in one request. I think this is a amazing project.

Now i try to use vuex-orm-graphql plugin, and i have some issues in implementing it in my project.
I am sending following query:

And i receive the following response:

Until this point all is as expected.

I would like to save a list of articles into store.
Now i need somebody to point me in the right direction because everything that i had tried failed.
My last "working" aka no errors saved in the store:

Also tried to create articleModel and articlesModel that has a many relation to articleModel. Failed.
I do receive this in console:

Vuex-ORM: GraphQL Plugin Ignoring entity article because it's not in the schema.

I am doing something wrong and now i am out of ideas.

[phortx]

Thank you for the kind words, let's see what we can do for you.

Not sure what the actual issue is. Can you take a look in the Articles that come from the server?

A articles (plural) model shouldn't be necessary. All articles that come from the server are automatically saved in the store (or should at least).

Can you show us your Article model?

[andreisima]

Thank you for your fast response.

Below all files involved

// store/storeModels/ articleModel.js

import { Model } from '@vuex-orm/core'

export default class Article extends Model {
  static entity = 'article'

  static fields () {
    return {
      id: this.increment(),
      title: this.string('')
    }
  }
}

// store/storeData/article.js

const defaultState = {}
const actions = {}
const mutations = {}
const getters = {}

export default {
  state: defaultState,
  getters,
  actions,
  mutations
}

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

// Vue Orm
import VuexORM from '@vuex-orm/core'
import VuexORMGraphQL from '@vuex-orm/plugin-graphql'

// Models and data
import article from './storeData/article'
import articleModel from './storeModels/articleModel'

Vue.use(Vuex)

// VUE-ORM Setup
// Create new instance of Database.
const database = new VuexORM.Database()

// Register Model and Module. The First argument is the Model, and second is the Module.
database.register(articleModel, article)

// Auth headers for this apollo instance
const authHeaders = {
  'Authorization': 'JWT ' + localStorage.getItem('drft')
}

VuexORM.use(VuexORMGraphQL, {
  database: database,
  headers: authHeaders,
  url: 'http://93.114.129.7:8000/graphql',
  useGETForQueries: false,
  connectionQueryMode: 'edges',
  debug: process.env.NODE_ENV !== 'production'
})

export const store = new Vuex.Store({
  plugins: [
    VuexORM.install(database)
  ]
})

Thank you.

[phortx]

static entity = 'article'

This should be in plural (articles), I think.

Everything else looks good for me. If this doesn't fix the issue, maybe the RAW response from the server would help, I think :)

[andreisima]

static entity = 'articles'
Same output

RAW output as a print screen from console

Also in this output there is a warning

vuex-orm-graphql.esm.js?71e0:21483 Vuex-ORM: GraphQL Plugin Ignoring entity article because it's not in the schema.

Might be a issue... and i quite do not understand how is that not in schema.

[phortx]

That could be an issue. It means that there is no article query to fetch single a single article. This is required currently, I think.

[andreisima]

Ok, i will implement a model to retrieve only one item from backend and see from there.

[phortx]

You don't need a model, you just to ensure that there is a article query in your GraphQL Schema.

[andreisima]

In the backend i have an article query.
As you can see in the attached.
Also schema introspection looks ok.

Data from Insomnia client

[phortx]

Looks good. What I can see here is that the ID is not numeric. Someone told us in Slack yesterday that this doesn't work currently.

I can't tell for sure that this is the issue, but it could. I will try to discuss that with @kiaking

[andreisima]

I can confirm that the initial schema fetch is OK and there is a Query[0].article in there.
I can try to override this in the backend ... but i do not know if this is even possible and i if so i can risk brake some graphQL internals since that id is unique all records.

Off this topic.
Docs on vuex-orm-grapql are a bit misleading.
https://vuex-orm.github.io/vuex-orm-graphql/guide/fetch/#fetching-a-single-record
The query output is not like the one listed. Instead is (notice the extra argument filter):

query Articles($suid: Float!) {
  articles(filter: {suid: $suid}) {
    edges {
      node {
        id
      }
    }
  }
}

[andreisima]

Looks good. What I can see here is that the ID is not numeric. Someone told us in Slack yesterday that this doesn't work currently.

I am not sure that this is the issue here.
I had read the code for vuex-orm and ID can be a string (in the master branch repo).
Now investigating this further i had found the following problem in my case.

In following function/class (this is still confusing me in JS):

Schema.prototype.getType = function (name, allowNull) {
    if (allowNull === void 0) { allowNull = false; }
    name = upcaseFirstLetter(name);
    var type = this.types.get(name);
    if (!allowNull && !type)
        throw new Error("Couldn't find Type of name " + name + " in the GraphQL Schema.");
    return type || null;
};

Here it is looking for the Type of the object directly in the schema. That is quite correct.
Now my problem is naming.
Module is looking for Object and i have ObjectNode in the schema. I will try to rename it in the backend and see if this is changing something.

OK.... this is working... Now i have to follow other 2 warnings.

vuex-orm-graphql.esm.js?71e0:21483 Vuex-ORM: GraphQL Plugin Could find the argument with name id for the mutation/query articles
vuex-orm-graphql.esm.js?71e0:21483 Vuex-ORM: GraphQL Plugin Could find the argument with name id for the mutation/query articles

Now i am 80% sure that all the problems are from naming convention that vuex-orm/graphql expects to be delivered from the server. This can be a problem in the long run. I do come from django/python world where the "Explicit over Implicit" is enforced, and this can cause some issues with graphql in the front-end. Maybe a better documentation on what is expected to delivered to module. I might help on that.

Will update this with more. Maybe somebody from django world will need it. Also i will edit the title to reflect the problem.

[andreisima]

@phortx
Hi,
IMPORTANT : When i query for OBJECT it is saved in the store
When i query for OBJECTS this is a different story.
I have managed to narrow everything down up to this:

Item
    $id: "_no_key_1"
    $isPersisted: true
    id: null
    title: ""

I bet that in Transformer.transformIncomingData the data arrives in a different format. And that i think is because my data gets out from here like this:

OJECTS: {
    edges [
        0: { node { id, other, other2}},
        1: {node {id, other, other2}},
        .....
       __typename: SomeTypename
    ]
}

and i bet that the function responsible with saving it wants something like:

OBJECTS: {
        0: { node { id, other, other2}},
        1: {node {id, other, other2}},
        .....
}

Is there any way i can control this?
Also here

/**
     * Transforms a set of incoming data to the format vuex-orm requires.

Is there any way to find out how do you like the incoming data to be formatted like?

Than you.

[phortx]

Sorry I'm really busy these days. Thanks for your investigation. This is something I thought of too.

There are different ways in GraphQL how you structure your connections. You're using the edges mode which is not well tested currently. You just discovered that the transformer doesn't yet respect the connection mode.

I will fix this. If you want to help, you could provide a PR with a spec example for the transformer unit test which fails for your case. :)