Fixes #54

You can disable response unwrapping by setting one simple var:

Model.withoutWrapping = false

Tests included, please let me know if you can merge it 👍

Edit: Kind of a big change to support nested unwrapping of data. Example API response, Model.withoutWrapping to false returns the same result:

{
  data: [
    {
      id: 1,
      someId: 'ap319-0nh56',
      firstname: 'John',
      lastname: 'Doe',
      age: 25,
      comments: {
        data: [
          {
            id: 1,
            post_id: 1,
            someId: 'ma018-9ha12',
            text: 'Hello'
          },
          {
            id: 2,
            post_id: 1,
            someId: 'mw012-7ha19',
            text: 'How are you?'
          }
        ]
      }
    },
    {
      id: 1,
      someId: 'by887-0nv66',
      firstname: 'Mary',
      lastname: 'Doe',
      age: 25,
      comments: {
        data: [
          {
            id: 1,
            post_id: 1,
            someId: 'ma018-9ha12',
            text: 'Hello'
          },
          {
            id: 2,
            post_id: 1,
            someId: 'mw012-7ha19',
            text: 'How are you?'
          }
        ]
      }
    }
  ]
}

When Model.withoutWrapping is set to true (or not defined) we return it like this:

[
    {
      id: 1,
      someId: 'ap319-0nh56',
      firstname: 'John',
      lastname: 'Doe',
      age: 25,
      comments: [
          {
            id: 1,
            post_id: 1,
            someId: 'ma018-9ha12',
            text: 'Hello'
          },
          {
            id: 2,
            post_id: 1,
            someId: 'mw012-7ha19',
            text: 'How are you?'
          }
      ]
    },
    {
      id: 1,
      someId: 'by887-0nv66',
      firstname: 'Mary',
      lastname: 'Doe',
      age: 25,
      comments: [
          {
            id: 1,
            post_id: 1,
            someId: 'ma018-9ha12',
            text: 'Hello'
          },
          {
            id: 2,
            post_id: 1,
            someId: 'mw012-7ha19',
            text: 'How are you?'
          }
      ]
    }
]

Hello there,

I am trying to use this awesome plugin to upload a PDF file. I have created a model for this:

import Model from './Model';

export default class JobApplication extends Model {
  resource() {
    return 'v2/job_applications';
  }
}

Then, I call the model within the .vue file like that:

...
 import JobApplication from "./../models/JobApplication";
...
async onSubmit() {
  let job = new JobApplication({
    first_name,
    last_name,
    email,
    mobile_phone,
    resume: this.$refs.resume.files[0]
  });
  await job
    .save()
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.error(error.response);
    });
}
...

The problem is that the POST request fails every time I try to submit the form because of the resume field. What am I doing wrong in here? Do I have to do any extra steps? Thank you

Add support to nested filters to where and whereIn.

Closes #81

TODO

• [x] Update documentation of where and whereIn

Usage

await Model.where(['user', 'status'], 'active').get()
// GET /resource?filter[user][status]=active

await Model.whereIn(['user', 'status'], ['active', 'inactive']).get()
// GET /resource?filter[user][status]=active,inactive

This pull request is to handle request to JSON API’s with and without data wrapping. Basically you only need to configure your model and define how your data is wrapper in each response operation.

Configration

You only need to define de value of dataWrappers()
By default, all models operate without data wrapping, for backward compatibility.

  dataWrappers() {
    return {
      index: null,
      store: null,
      show: null,
      update: null,
      destroy: null,
    }
  }

So, if your API returns all your data inside a data attribute, then you should set up dataWrappers() like this:

  dataWrappers() {
    return {
      index: 'data',
      store: 'data',
      show: 'data',
      update: 'data',
      destroy: 'data',
    }
  }

In case your API only wraps the resources collections, then, you only need to set up that response type:

 dataWrappers() {
   return {
     index: 'data',
     store: null,
     show: null,
     update: null,
     destroy: null,
   }
 }

Well, you get the idea...

Model Instance hydration

Another thing this pull request solves is the model hydratation. All models will be hydratated after each CRUD operation. This is usefull if your API returns a full representation of the resource. This avoids a second request to get the new values.

 // resource before request
 // {
 //   id: 1,
 //   username: 'arya'
 //   email: '[email protected]'
 //   token: '1234'
 // }

 // PUT /users/1
 let user = new User({ id: 1, email: '[email protected]' })
 await user.save()

 // response from API for PUT /users/1
 // {
 //   data: {
 //     id: 1,
 //     username: 'arya'
 //     email: '[email protected]'
 //     token: '1234'
 //   }
 // }

 user = {
   id: 1,
   username: 'arya'
   email: '[email protected]'
   token: '1234'
 }

This is very useful even for a DELETE request, if you return the deleted values.

Access to response instance on save.

Finally, now, method save() returns the response instance unmodified. The models are stored in the instance itself (hydrated), but the returned value is the http response. Again, this is useful if we want to access metadata information in the response data.

  let user = new User({name: 'Arya'})
  res = user.save()

  // "user" is the User Instance
  user = {
    id: 1,
    name: 'arya',
  }

  // "res" is the http response
  res = {  
    data: {},
    status: 200,
    statusText: 'OK',
    headers: {},
    config: {},
    request: {}  
  }

Tests...

I've added test for all the cases (I think). By the way, I added some "deprecated" comments (in tests) for methods $get(), $first(), $find() as I think those methods are redundant now? I don't know, what do you think?

To reproduce: Visit for example Relationship Operations.

Expected behaviour: Opening links for "On this page" in a new window (on the right in widescreen layout) should link to their respective sections in the documentation.
Linking to specific headlines in the documentation is especially useful so we can send people to a specific section of a documentation page.

What actually happens: The navigation only works when left clicking. Opening the resulting URL in a new browser window leads back to the documentation's starting page. The underlying links are not working correctly.
Additionally, hovering over a headline and clicking the # also links back to the documentation's starting page.

Hello,

I am trying to catch error on POST data.

My code:

<form
          @submit.prevent="onSubmit"
          class="apply-form-section__form"
          action
          method="POST"
          ref="form"
          role="form"
        >
          <div class="apply-form-section__input-wrapper">
            <input
              type="text"
              class="apply-form-section__input-wrapper--input-field"
              placeholder="Name"
              v-model.lazy.trim="formResponses.name"
            >
          </div>
          <div class="apply-form-section__input-wrapper">
            <input
              type="tel"
              class="apply-form-section__input-wrapper--input-field"
              placeholder="Phone number"
              v-model.lazy.trim="formResponses.mobile"
            >
          </div>
          <div class="apply-form-section__input-wrapper">
            <input
              type="text"
              class="apply-form-section__input-wrapper--input-field"
              placeholder="Company"
              v-model.lazy.trim="formResponses.company"
            >
          </div>
</form>

data() {
      return {
        formResponses: {
          name: "",
          mobile: "",
          company: "",
          position: "",
          email: ""
        },
      };
    },
methods: {
      async onSubmit() {
        console.log("form responses:", this.formResponses);
        let newApplication = new CardApplication({
          name: this.formResponses.name,
          mobile_phone: this.formResponses.mobile,
          company: this.formResponses.company,
          position: this.formResponses.position,
          email: this.formResponses.email
        });

        await newApplication
          .save()
          .then(response => {
            this.formSubmitted = true;
            if(response.meta.code == 200) {
              console.log("success:", response);
              console.log("form data:", this.formResponses);
            }
          })
          .catch(err => {
            console.log("ERROR SAVING APPLICATION:", err);
          });
      }

The problem is that I don't get the supposed response object on error. I only get Error: Request failed with status code 400 in the console.

Can you help me with this?

Here is the code I have that I am using to update and I can get the save/update to work?

this.productObj = await Product.include('variants', 'additional_info', 'nutrition_fact')
                .append('min_priced_variant')
                .find(this.productId)

this.productObj.name = 'Test';
this.productObj.category_id = 3;

this.productObj.save();

Is there any reason why this would send a POST request to /products instead of a PUT request to /products/{id}.

Am I missing something?

Today I updated to package version 1.4.1. Now, when I compile my code, I get:

These dependencies were not found:

* @babel/runtime/helpers/assertThisInitialized in ./node_modules/vue-api-query/build/Model.js
* @babel/runtime/helpers/classCallCheck in ./node_modules/vue-api-query/build/StaticModel.js, ./node_modules/vue-api-query/build/Parser.js and 2 others
* @babel/runtime/helpers/createClass in ./node_modules/vue-api-query/build/Model.js, ./node_modules/vue-api-query/build/StaticModel.js and 2 others
* @babel/runtime/helpers/getPrototypeOf in ./node_modules/vue-api-query/build/Model.js
* @babel/runtime/helpers/inherits in ./node_modules/vue-api-query/build/Model.js
* @babel/runtime/helpers/interopRequireDefault in ./node_modules/vue-api-query/build/index.js, ./node_modules/vue-api-query/build/StaticModel.js and 3 others
* @babel/runtime/helpers/possibleConstructorReturn in ./node_modules/vue-api-query/build/Model.js
* @babel/runtime/helpers/slicedToArray in ./node_modules/vue-api-query/build/Builder.js

To install them, you can run: npm install --save @babel/runtime/helpers/assertThisInitialized @babel/runtime/helpers/classCallCheck @babel/runtime/helpers/createClass @babel/runtime/helpers/getPrototypeOf @babel/runtime/helpers/inherits @babel/runtime/helpers/interopRequireDefault @babel/runtime/helpers/possibleConstructorReturn @babel/runtime/helpers/slicedToArray 

I think, there are some dependencies are needed in the "dependencies" section, not "devDependencies". So far I can reconstruct, the error starts with 1.3.0

It is typical for JSON API's to wrap not only multiple results but also single results in a data key. (Even Laravel's API Resources default to this behaviour.)

For multiple results (arrays of items), vue-api-query automagically works regardless of whether or not the data key wrapper is present.

I feel that for single results there should be the same behaviour.

Backward-compatibility can be ensured by adding a configuration option or optional function argument to enable this behaviour. (Similar to withoutWrapping in Laravel's API Resources. See Eloquent: API Resources)

So, if the backend responds with:

{
    "data": {
        id: 1,
        firstname: "John",
        lastname: "Doe",
        age: 25
    }
}

And withWrapping is set to true, the behaviour should be the same as if the response was:

{
    id: 1,
    firstname: "John",
    lastname: "Doe",
    age: 25
}

I had trouble defining custom properties on the models, maybe you have a best-practice approach for me on this, as my current fix is a workaround.

I went and added a custom property to my base class for vue-js-api models (I have a getter and setter as well):

MyModelBase.js

  constructor(...args) {
    super(args);
    
    this._myProp = "";
    
    return this;
  }

Initializing a Model with the constructor resulted in exceptions in the browser console.

page.vue

  // This throws an error in the console, that `.include()` is not a function
  await MyModel
    .include(['test'])
    .first()
    .then( response => () {} )
    
    ...

I realised later that adding the constructor did something bad.
Consider your Model's constructor:

Model.js

  constructor(...atributtes) {
    super()

    if (atributtes.length === 0) {
      this._builder = new Builder(this)
    } else {
      Object.assign(this, ...atributtes)
    }
    
    ...
  }

The else portion there skips initializing this._builder - probably because you assume it is of on of your Models and already has a _builder. But in this case it's called from my custom constructor.

I fixed adding _builder in the constructor of my base class, which is of course not future-proof. It currently works for my use-cases.

    // Added after the call to super()
    this._builder = new Builder(this);

Q: Am I adding the custom constructor incorrectly? Is there an alternative way to add properties to this?

PS: The correct spelling is attributes, not atributtes.
Is this intentional? Or is this an ES6 thing where attributes is a reserved word?
Maybe you are handling an unknown number of butts with atritis?
In that case it should be atriButts :)

Edit: Formatting

Failed to compile with 2 errors
This dependency was not found:

* vue-api-query in ./src/boot/axios.js, ./src/models/Model.js

To install it, you can run: npm install --save vue-api-query

import { Model } from 'vue-api-query'
import axios from 'axios'

[...]

Downgrading to 1.5.2 solves the issue.

Hi,

i would use the same query builder syntax to export data as Excel.

For example, calling:

User.
    .where(toRaw(filters.value))
    .orderBy((descending ? '-' : '') + sortBy)
    .export('users.xlsx');

would call /users/export with the same querystring parameters of get() method and then use a snippet similar to

axios.get(url, { responseType: 'blob' })
      .then(response => {
        const blob = new Blob([response.data], { type: 'application/pdf' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = label
        link.click()
        URL.revokeObjectURL(link.href)

or https://www.npmjs.com/package/file-saver

I'm using https://docs.laravel-excel.com/3.1/exports/ and would be incredibly helpful replicate the same get() behaviour exporting the Excel from

public function export()
    {
        $data = QueryBuilder::for(User::class)
            ->allowedFilters(['soggetto', 'soggetto.nominativo', 'login', 'tipo_utente', 'roles.id'])
            ->allowedIncludes(['soggetto'])
            ->with('soggetto')
            ->get();

        return Excel::download(new UsersExport($data), 'users.xlsx');
    }

Maybe is already possible with some hack :)

Thanks

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.9.4 to 6.9.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.