vuex-orm / plugin-graphql

Vuex ORM persistence plugin to sync the store against a GraphQL API.
https://vuex-orm.github.io/plugin-graphql/
MIT License
227 stars 52 forks source link

How to handle models that have multiple words? #167

Closed jimmiejackson414-zz closed 3 years ago

jimmiejackson414-zz commented 3 years ago

Hi there, I've got an odd sort of question.

I have a model Shopping List Item. I've defined it as such:

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

export default class ShoppingListItem extends Model {
  static entity = 'shopping_list_items';

  static fields () {
    return {
      id: this.attr(null),
      title: this.string(''),
      checked: this.boolean(false),
      quantity: this.number(0),
      created_at: this.attr(null),
      updated_at: this.attr(null),
    };
  }
}

When I attempt to run a $save() and $push(), I receive the error: Couldn't find Type of name Shopping_list_itemInput in the GraphQL Schema.

Theoretically I could change the name of the input on the backend to Shopping_list_itemInput, however I think you'll agree that this is not optimal. Do you have any suggestions for naming multi-worded models?

jimmiejackson414-zz commented 3 years ago

Looks like there's an open PR from August #157 that would solve this?

jimmiejackson414-zz commented 3 years ago

Just to follow up here, I think I've found a suitable enough solution for my problem.

By changing the entity name and all relation references to camelCase, as well as references in the backend schema to camelCase, I am able to successfully avoid ugly mixtures of camel- and snake-case. So taking the above model in the original question, I changed to something like this:

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

export default class ShoppingListItem extends Model {
  // static entity = 'shopping_list_items';
  static entity = 'shoppingListItems';

  static fields () {
    return {
      id: this.attr(null),
      title: this.string(''),
      checked: this.boolean(false),
      quantity: this.number(0),
      created_at: this.attr(null),
      updated_at: this.attr(null),
    };
  }
}

And because the name of the input is derived from the getInputTypeName function of the DefaultAdapter class, this would change the input that it's searching for to ShoppingListItemInput.