Javascript library

The package does include a Javascript counterpart to help query the back-end; the package is distributed with the composer package instead of a separate npm package as it's strictly related to the php implementation.

Include it in resources/js/app.js

import ResourceQuery from "../../vendor/plokko/resource-query/js/ResourceQuery";
// Make it available in pages
window.ResourceQuery = ResourceQuery;
//...

Note: Axios is required as a dependency

Usage

Instantiate a new ResourceQuery by specifying target URL and method (default get):

let rq = new ResourceQuery('/url','get');

You can add or modify filters, sorting and options

Filters:

// Set filters query parameter (must be the same as the back-end)
rq.filterParameter = 'filters';
// Add a filter
rq.filters.test1 = 'a';
// or
rq.filter('test1','a');
// or
rq.addFilters({test1:'a',test2:'b'});

// Clears all the filters
rq.clearFilters();

Sorting:

// Set orderby query parameter (must be the same as the back-end)
rq.orderParameter = 'order_by';
//Set sorting fileds
rq.order_by = ['field1',['field2','desc']];
//or
rq.order_by = ['field1','-field2'];
// or
rq.orderBy('field1','asc').orderBy('field2','desc');

// Clears all the orderby options
rq.clearOrderBy();

//Clears all the filters and orderby options
rq.resetQuery();

Pagination:

// Set page (if pagination is enabled)
rq.page = 2;
// Set the page size (may be ignored by the back-end if not allowed)
rq.pageSize = 10; // 10 element per page

Request cancellation and options

Request cancellation is supported via a token option:

let rq = new ResourceQuery('/url','get');
let cancelToken = ResourceQuery.cancelToken;
rq.get({cancelToken})
    .then(r => {
        console.log('Data received',r);
    })
    .catch(e => {
        // Check if the request was user-cancelled            
        if (ResourceQuery.isCancel(e)) {
            //the request was user-cancelled, no error thrown
            console.warn('user cancelled');
        } else {
            console.error('Request error:', e);
        }
    });
//...

// When you want to cancel the request
cancelcancelToken.cancel();

As this plugin is based on Axio see Axios request configuration for other supported configuration options (some properties may be ignored)

Paginator helper

To help fetching paginated data you can use the Paginator helper by calling the paginate function

let rq = new ResourceQuery('/url','get');
//appy ordering or filters
let paginator = rq.paginate(true); //Set argument to true to start fetching first page right away

This class will fetch a page of data with the loadMore() function (will be called after initialization if prefetch argument is set to true or not set) and appent the data to the data parameter. The loadMore() function will return a promise and set the loading parameter to true while is running; subsequent running of this function will fetch only one pagie if the previous request is still running.

console.log(paginator.data); // paginator data, array
console.log(paginator.loading); // true if is already fetching another page. boolean
console.log(paginator.hasMore()); // true if is already fetching another page
paginator.loadData().then(...)