Search code examples
reactjshttp-headersreact-admin

react-admin fetch header X-Total-Count issue


When use react-admin from frontend to call backend API, got this error from browser console:

Warning: Missing translation for key: "The X-Total-Count header is missing in the HTTP Response. The jsonServer Data Provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers header?"

If use ng-admin to call the backend API, it works well.


Solution

  • You need to add a header, named "X-Total-Count" in your responses To solve this. The value of the of "X-Total-Count" should be equal to the total number of records.

    Let's say you are fetching the list of comments, there are in total 125 comments in the database and you are fetching 25 records out of that. Then the value of "X-Total-Count" should be 125.

    It is being used for pagination.

    For example, here I attached a screenshot of Chrome Development tool.

    enter image description here