Converting fetch to a POST method does not work properly

[ryanrapini]

Hey all,

Short Summary: When overriding the fetch method to be POST, the url still has parameters encoded in it as if I was performing a GET request.

I'm trying to override my collection fetch method to use pagination and I came across something that I think is somewhat strange.

import { Collection } from 'vue-mc';
import InventoryItem from '../models/InventoryItem';

export default class InventoryItemCollection extends Collection {
    options() {
        return {
            'methods': {
                'fetch': 'POST'
            }
        };
    }
    
    model() {
        return InventoryItem;
    }

    routes() {
        return {
            fetch: '/data/inventory/paginated',
        };
    }
}

My API expects a POST request and when i call inventoryItems.page(1).fetch({params : {'test': 'test'}}); everything behaves correctly, but the URI still has the parameters in it, as if I performed a GET request:

/data/inventory/paginated?test=test&page=1

This seems like a rather harmless cosmetic issue with vue-mc, but I thought I'd report it nonetheless. Is there something I should be setting to fix it? Or should I not be overriding the default methods in this manner?

thanks in advance

[eduardobc88]

Why do you need send POST data in fetch?
By default a Fetch use GET method that doesn't send data in the request BODY.
The most easy and correct is that in your API instead of get POST params, get URL params and you don't need customize nothing in your App.
If you want to do a "fetch" sending post data, you need register a custom request method and override some default functions to your custom request "fetch" with post data.

[ryanrapini]

I may be doing something wrong, but our fetch() is being changed to allow searching and pagination of results on the server side, and I need search to sometimes include non ASCII characters. To my understanding, a GET request will require ASCII only parameters.

I have no problem implementing a custom method (I already have actually as a stopgap solution) but I'm just pointing out that while fetch can be switched to POST, the behavior doesn't seem to line up correctly.

[eduardobc88]

@ryanrapini Maybe you can create a simple model and send POST data normally. This is the most easy and understandable and will works good. To the pagination you can handle with Vue Router getting the "{page_number}" and setting in the model before the POST like this: myModel.set('page_number', pageNumber) and after myModel.Save().then((result) => {// code} ).finally(() => { // code }) and you won't have problems with the save because the page_number property is always edited before save. I hope this help you. :)