How to use the devextreme/data/custom_store function in devextreme

this.apiConfig = apiConfig

        this.api.get('/jobs', options)
            .toPromise()
            .then(json => {
                this.jobDatasource = new DataSource({
                    store: json['hydra:member']
                })
            })
            .catch(error => {
                console.log(error)
                throw 'Data Loading Error'
            })

        this.authorsDatasource.store = new CustomStore({
            load: (loadOptions: any) => {
                let itemPerPage = this.apiConfig.itemsPerPage

                let options = {
                    params: [],
                }

                // manage number of items wished by the datagrid and that the API must return (take care to configure the config/packages/api_platform.yaml:client_items_per_page key)
                if (loadOptions.take) {
                    options.params[this.apiConfig.itemsPerPageParameterName] = loadOptions.take
                    itemPerPage = loadOptions.take
                }

                // manage the pagination: ApiPlatform works with hydra system and so a page number whereas DevXpress datagrid uses a skip/take parameter, so it requires a small Math calc
                if (loadOptions.skip) {
                    options.params['page'] = loadOptions.skip > 0 ? Math.ceil(loadOptions.skip / itemPerPage) + 1 : 1

// Take care, until you click on the parent window, data won't be refreshed in datagrid. don't know if it's because of browser behavior or DevXpress.datagrid
                  notify(`new Book received with id ${book.id}, focus the window to see the changes in datagrid.
                    Data is not saved until you edit it`, 'info', 5000);
                  this.dataGrid.instance.clearSelection()

                  break
              case 'hello':
              case 'ping':
              default:
                  notify(`data received from second screen (cmd=${message.cmd})`, "info", 5000)
                  break
          }
      })

      // @todo: the store should be moved into services folder and injected here instead of the ApiService
      this.dataSource.store = new CustomStore({
          // I use byKey method to modify the store from BroadcastChannel API
          // when i receive a new Book, then i alter the this.books (which is not the store used by the datagrid)
          // because the datagrid can spy its data using byKey, then it will be alerted of the modification
          // But don't forget to focus the window or even if the this.books is altered, the datagrid won't refresh the
          // displayed data
          byKey: (key: any | string | number) => {
              const book = this.books.find(oneBook => key === oneBook.id)

              return book
          },
          load: (loadOptions: any) => {
              let itemPerPage = this.apiConfig.itemsPerPage

              let options = {
                  params: []
              }

descending: false,
    page: 1,
    rowsPerPage: apiConfig.itemsPerPage, // current rows per page being displayed
    rowsNumber: 0 // mandatory for server-side pagination
}

// dataStore for GraphQL Queries: vue-apollo will inject data in vue components based on the name of the query

const getBooks = {
    pageInfo: {},
}

const uri = `//${host}${apiPlatformPrefix}/books`

export const dataSource = {
    store: new CustomStore({
        load: function(loadOptions) {
            let params = '?';

            // @todo not sure it's a good algo: skip maybe the number of rows wheras apiPlatform expect a pageNumber
            // const nextPage = loadOptions.skip > 0 ? (loadOptions.skip/loadOptions.take)+1 : 1
            params += `${apiConfig.pageParameterName}=${loadOptions.skip || 1}`;

            if (loadOptions.take || loadOptions.itemsPerPage) {
                params += `&${apiConfig.itemsPerPageParameterName}=${loadOptions.take || loadOptions.itemsPerPage}`;
            }

            if(loadOptions.sort) {
                params += `&${apiConfig.orderParameterName}=${loadOptions.sort[0].selector}`;
                if(loadOptions.sort[0].desc) {
                    params += ' desc';
                }

// Take care, until you click on the parent window, data won't be refreshed in datagrid. don't know if it's because of browser behavior or DevXpress.datagrid
                  notify(`new Book received with id ${book.id}, focus the window to see the changes in datagrid. 
                    Data is not saved until you edit it`, "info", 5000)
                  this.dataGrid.instance.clearSelection()

                  break
              case 'hello':
              case 'ping':
              default:
                  notify(`data received from second screen (cmd=${message.cmd})`, "info", 5000)
                  break
          }
      })

      // @todo: the store should be moved into services folder and injected here instead of the ApiService
      this.dataSource.store = new CustomStore({
          // I use byKey method to modify the store from BroadcastChannel API
          // when i receive a new Book, then i alter the this.books (which is not the store used by the datagrid)
          // because the datagrid can spy its data using byKey, then it will be alerted of the modification
          // But don't forget to focus the window or even if the this.books is altered, the datagrid won't refresh the
          // displayed data
          byKey: (key: any | string | number) => {
              const book = this.books.find(book => key === book.id)

              return book
          },
          load: (loadOptions: any) => {
              let itemPerPage = this.apiConfig.itemsPerPage

              let options = {
                  params: []
              }

constructor(private bookService: WizardBook, private routing: WizardRouting, private api: ApiService) {
        // teak: to allow the validation rule custom callack (validateAddOrSelectEditor) to access to this component instance
        // if you don't do that, the method validateAddOrSelectEditor' will be binded to the validator instance, not this component,
        // so you can't access to the lookup or any other element of the component
        this.validateAddOrSelectEditor = this.validateAddOrSelectEditor.bind(this)

        this.apiConfig = apiConfig

        this.dataSource.store = new CustomStore({
            load: (loadOptions: any) => {
                let itemPerPage = this.apiConfig.itemsPerPage

                let options = {
                    params: []
                }

                // manage number of items wished by the datagrid and that the API must return (take care to configure the config/packages/api_platform.yaml:client_items_per_page key)
                if (loadOptions.take) {
                    options.params[this.apiConfig.itemsPerPageParameterName] = loadOptions.take
                    itemPerPage = loadOptions.take
                }

                // manage the pagination: ApiPlatform works with hydra system and so a page number whereas DevXpress datagrid uses a skip/take parameter, so it requires a small Math calc
                if(loadOptions.skip) {
                    options.params['page'] = loadOptions.skip > 0 ? Math.ceil(loadOptions.skip / itemPerPage) +1 : 1