Only semi-working out of the box - says Infinity Model Fully Loaded

[rmcsharry]

This is a TRULY AWESOME add-on, thank you for creating it! 👍

I am a bit stuck.

I have read this and this about basic usage but only see the first page of records and then "Infinity Model Fully Loaded".

I followed standard setup. Index route, the Infinity component is on the template of that route. The data is loaded. I have a Rails API backend and added the meta tag with 'total_pages'. It calculates the total number of pages of data available based on the page size. So the server endpoint looks like this, using Kaminari and ActiveModelSerializers:

def index
    if params[:page]
      @employees = Employee.page(params[:page]).per(params[:per_page])
    else
      @employees = Employee.all
    end
    render json: @employees,
          meta: { total_pages: (Employee.count / params[:per_page].to_f).ceil }
  end

This endpoint works, returning data like this (all random made-up data, so no privacy issues here!):

{
   "data":[
      {
         "id":"224",
         "type":"employees",
         "attributes":{
            "avatar-url":"https://robohash.org/johnston_spencer@ruecker.io.jpg?size=50x50\u0026set=set3\u0026bgset=bg1",
            "first-name":"Spencer",
            "last-name":"Johnston",
            "email":"johnston_spencer@ruecker.io",
            "phone":"338-191-9272 x300",
            "status":"active",
            "status-code":3
         },
         "relationships":{
            "address":{
               "data":{
                  "id":"224",
                  "type":"addresses"
               }
            }
         }
      },
      {
         "id":"223",
         "type":"employees",
         "attributes":{
            "avatar-url":"https://robohash.org/george.jacobs@grimesbrakus.co.jpg?size=50x50\u0026set=set3\u0026bgset=bg1",
            "first-name":"George",
            "last-name":"Jacobs",
            "email":"george.jacobs@grimesbrakus.co",
            "phone":"186.468.2869",
            "status":"active",
            "status-code":3
         },
         "relationships":{
            "address":{
               "data":{
                  "id":"223",
                  "type":"addresses"
               }
            }
         }
      }
   ],
   "links":{
      "self":"http://localhost:3000/employees.json?page%5Bnumber%5D=3\u0026page%5Bsize%5D=2\u0026per_page=2",
      "first":"http://localhost:3000/employees.json?page%5Bnumber%5D=1\u0026page%5Bsize%5D=2\u0026per_page=2",
      "prev":"http://localhost:3000/employees.json?page%5Bnumber%5D=2\u0026page%5Bsize%5D=2\u0026per_page=2",
      "next":"http://localhost:3000/employees.json?page%5Bnumber%5D=4\u0026page%5Bsize%5D=2\u0026per_page=2",
      "last":"http://localhost:3000/employees.json?page%5Bnumber%5D=25\u0026page%5Bsize%5D=2\u0026per_page=2"
   },
   "meta":{
      "total-pages":25
   }
}


The template/index.hbs is like this:

```html
<h1>here</h1>
{{#each model as |employee|}}
  <h1>{{employee.lastName}}</h1>
{{/each}}
{{infinity-loader infinityModel=model}}


The index/route.js:

import Ember from 'ember';
import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute, {

model() {
    return this.infinityModel("employee", { perPage: 10, startingPage: 1 });
},

infinityModelUpdated(totalPages) {
Ember.Logger.debug('updated with more items');
},
infinityModelLoaded(lastPageLoaded, totalPages, infinityModel) {
Ember.Logger.info('no more items to load');
}
});

The only way I can 'scroll' and get more data to load is by adding " _canLoadMore: true," to the route...but the standard basic usage makes no mention that I need to add that...I found that in the linked issue for API's that do not return the 'total_pages' meta tag.

So is this a bug?

[rmcsharry]

I think I spotted the bug. The meta parameter should be 'total_pages' not 'total-pages'

Ember apps like to use camelCase for attributes but underscores are standard Ruby Syntax in attribute names.

So in most Rails API's that talk to Ember following JSONAPI and using AMS it is fairly standard to 'dasherize' all the JSON attribute names so that Ember is happy with them.

require 'active_model_serializers/register_jsonapi_renderer'
ActiveModelSerializers.config.adapter = :json_api

Shouldn't InfinityModel really be looking for a meta_tag called "total-pages" by default for better compatibility with what is, these days, a fairly common setup?

[rmcsharry]

So I added this to the route (and change the API to send 'meta.total'):

totalPagesParam: "meta.total"

and it solved the problem, but then I have to add that to every route. 👎

Or change my API (but not everyone has that luxury).

I would still argue that for beginners/newbies to this add-on, dropping the underscore as default would make more sense. Or perhaps document in the guide to highlight the importance of making sure the API meta tag matches the default one of the library. I dunno really, up to you!