Middleware URL Manipulation

[matt-morris]

I'm interacting with an API which uses query params for auth, and I'm trying to find the best way to add them on the fly. My first thought was to use middleware to modify the requests, since that's what I'm already doing to add the custom headers.

let middleware = new MiddlewareStack();

middleware.beforeFilters.push(function(url, options) {
  // hard-coded example:  this will actually be dynamically built, once i have a strategy for injecting params
  url += '?auth_id=1&auth_token=43a3f9e8a2986cd8182ab611d0dba648&auth_timestamp=1531772824';
  options.headers["Accept"] = "application/vnd.api+json"; // this works great
  console.log('url', url); // this shows up in the log, but not in the outbound request
});

ApplicationRecord.middlewareStack = middleware;

But modifying the urls here doesn't seem to change the actual url being built for the request.

Is there a way to manipulate URLs before they're used? Or is there a better way to solve this problem than the middleware approach?

Thanks in advance.

[richmolj]

Hey @matt-morris - I need to update the docs but you can use scope.extraParams({ foo: 'bar' })

[matt-morris]

Wow, thanks for the quick response!

Okay, so that works if I call it on an instance of the model.

Account.extraParams({
  auth_id: 1,
  auth_token: '43a3f9e8a2986cd8182ab611d0dba648',
  auth_timestamp: '1531772824',
}).find(1).then(account => {
  console.log('account', account)
})

But is there a way to define it on the ApplicationRecord?

(And I apologize if that's a silly question -- I'm not quite comfortable in Typescript yet, and it's throwing me...)

[richmolj]

Not a silly question at all, we should really enhance the middleware to allow this. I don't think there's an easy way to do this globally at the moment (we pass an Authorization header instead of query params).

/cc @wadetandy

[matt-morris]

Well, this is at least a path forward. I can use extraParams to work around my problem for now, so thanks again for the timely assistance.

As for enhancing the middleware, I'd be willing to give it a go, if you all are open to a PR. Like I said, I'm still making the switch to Typescript, so it might take me a bit to get familiar enough with the internals here to do it right, but I'm certainly willing to put in the work. And I'd be down to contribute to the docs, too, if it will help.

I don't know how I missed this project before now. It's amazing!

[wadetandy]

One relatively straightforward way to do this (which would also knock an existing item off our roadmap) would actually be to make the Request class swappable/subclassable. Right now, model.ts and scope.ts hardcode to use the internal request adapter, but if this were something that could be swapped on your ApplicationRecord, then you could subclass it for your specific behavior:

import { Request } from 'jsorm'

class MyRequestAdapter extends Request {
  // fetch is currently a private method called _fetch, which we'd need to rename
  async fetch(url: string, options: RequestInit): Promise<any> {
    url += '?auth_id=1&auth_token=43a3f9e8a2986cd8182ab611d0dba648&auth_timestamp=1531772824';

    return super.fetch(url, options)
  }
}

class ApplicationRecord {
  static requestAdapter = MyRequestAdapter
}