how to structure a mutation in vuex orm graphql to connect with django graphql backend

Question

I'm having problems making queries and creating / updating / deleting things in django graphql through the graphql plugin of vuex orm.

From the interface provided by django to execute queries, I can perfectly use my mutations and consult any particular data or any collection of them.

I'm going to write an example of how I create an object called "TipoProducto" from the django interface:

mutation myMutation {
createTipoProducto(input: {nombre:"Pizza", descripcion:"foobar"}) {
    tipoProducto {nombre, descripcion}
    status
}
}

This code will return the object with its attributes and a status 200 if it was successful.

The Django classes in the schema:

class TipoProductoNode(DjangoObjectType):
    class Meta:
        model = TipoProducto
        filter_fields = ['nombre', 'productos']
        interfaces = (relay.Node, )

class TipoProducto(graphene.ObjectType):
    nombre = graphene.String()
    descripcion = graphene.String()

class CreateTipoProducto(graphene.ClientIDMutation):

    class Input:
        nombre = graphene.String(required=True)
        descripcion = graphene.String(required=True)

    tipo_producto = graphene.Field(TipoProducto)
    status = graphene.Int()
    ok = graphene.Boolean()

    def mutate_and_get_payload(self, info, nombre, descripcion, client_id_mutation=None):
    tipo_producto = TipoProductoNode._meta.model(nombre=nombre, descripcion=descripcion)
    tipo_producto.save()
    return CreateTipoProducto(tipo_producto=tipo_producto, ok=bool(tipo_producto.id), status=200)

My model in vuex orm:

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

export default class TipProd extends Model { static entity = "tipProds"

static fields () {
    return {
        id: this.increment(),
        nombre: this.attr(''),
        descripcion: this.attr(''),

        producto: this.hasMany(Product, 'tipProd_id')
        }
    }
}

This is the method I try to use to create a new object "TipoProducto":

methods: {
         async register (tipProduct) {
            await TipProd.insert({
                data: 
                    tipProduct         
            });
            const tipProd = TipProd.query().last()
            await tipProd.$mutate({ name: 'createTipoProducto' });
}

where data: tipProducto are the attributes taken from a form

I can not find the way that vuex orm correctly structured the query to create an object. What am I doing wrong?

I did not get apollo devtools to work in order to debug the exit of the vuex-orm. I have no idea how the query is being created.

Sorry for the english and thanks.

Franco Schillage Franco Schillage · Accepted Answer · 2019-03-27T14:38:26

The structure was fine, I could not see the query because there was none, I failed the connection between Django Graphene and Vuex-ORM Graphql plugin, since the API side had badly defined mutations.

how to structure a mutation in vuex orm graphql to connect with django graphql backend

1 Answers