How do you get a syncfusion custom adapter to work with the feathers socket.io client

Question

feathers-client 2.3.0

syncfusion-javascript 15.3.29

I have been trying for awhile to create a syncfusion custom adapter for the feathers socket.io version of it's client. I know I can use rest to get data but in order for me to do offline sync I need to use the feathers-offline-realtime plugin.

Also I am using this in an aurelia project so I am using es6 imports with babel.

Here is a code snippet I have tried, I can post the whole thing if needed.

I am also not sure if just using the Adapter vs UrlAdapter is correct as I need sorting and paging to hit the server and not just to do it locally. I think I can figure that part out if I can at least get some data back.

Note: Per Prince Oliver I am adding a clarification to the question I need to be able to call any methods of the adapter as well besides just proccessQuery such as onSort. When the datagrid calls the onSort method I need to be able to call my api using the feathers socket.io client since it handles socket.io in a special manner for offline capabilities.

import io from 'socket.io-client';
import * as feathers from 'feathers-client';
const baseUrl = 'http://localhost:3030';
const socket = io.connect(baseUrl);
const client = feathers.default()
  .configure(feathers.hooks())
  .configure(feathers.socketio(socket));
const customers = client.service('customers');

export class FeathersAdapter {

  feathersAdapter = new ej.Adaptor().extend({

    processQuery: function (ds, query) {

      let results
    makeMeLookSync(function* () {
      results = yield  customers.find();
      console.log(results);
    });

The result is undefined. I have tried several other ways but this one seems like it should work.

REVISED CODE:

I am now getting data but also strange error as noted in the picture when I call

 let results = await customers.find();

The process then continues and I get data but when the result variable is returned there is still no data in the grid.

   async processQuery(ds, query) {
      let baseUrl = 'http://localhost:3030';
      let socket = io.connect(baseUrl);

      let client = feathers.default()
        .configure(feathers.hooks())
        .configure(feathers.socketio(socket));

      let customers = client.service('customers');

      let results = await customers.find();

     var result = results, count = result.length, cntFlg = true, ret, key, agg = {};

      for (var i = 0; i < query.queries.length; i++) {
       key = query.queries[i];
       ret = this[key.fn].call(this, result, key.e, query);
        if (key.fn == "onAggregates")
          agg[key.e.field + " - " + key.e.type] = ret;
        else
          result = ret !== undefined ? ret : result;

        if (key.fn === "onPage" || key.fn === "onSkip" || key.fn === "onTake" || key.fn === "onRange") cntFlg = false;

        if (cntFlg) count = result.length;
      }

      return result;

Answer 1

The processQuery method in the DataManager is used to process the parameter which are set in the ej.Query like skip, take, page before fetching the data. Then the data is fetched asynchronously based on these parameters and fetched data is processed in processResponse method to perform operations like filtering or modifying. The processQuery function operates synchronously and it does not wait for the asynchronous process to complete. Hence the returned data from the API did not get bound on the Grid and throws undefined error.

So, if you are using the socket.io to fetch the data from the API, then the data can be directly bound to the Grid control using the dataSource property. Once the dataSource is updated with the result, it will be reflected in Grid automatically through two-way binding.

[HTML]

<template> 
  <div>
    <ej-grid e-data-source.bind="gridData" e-columns.bind="cols"> </ej-grid> 
  </div> 
</template>

[JS]

let baseUrl = 'http://localhost:3030';
let socket = io.connect(baseUrl);

let client = feathers.default()
    .configure(feathers.hooks())
    .configure(feathers.socketio(socket));

let customers = client.service('customers');

let results = await customers.find();

this.gridData = results; // bind the data to Grid