davestewart / axios-actions Goto Github PK

Using construction of

const data = await Promise.all(
  Object.values(this.orders).map(
    async (order) =>
      // await this.$axios.$get(`/authenticated/site/client/order/${order.id}`)
      await this.$api.auth.use('data').getClientTicketByOrderId({
        id: order.id
      })
  )
)

Causes error

TypeError: Cannot read property 'data' of null
    at eval (axios-actions.esm.js?2d04:491)
    at eval (axios-actions.esm.js?2d04:288)
    at Array.forEach (<anonymous>)
    at eval (axios-actions.esm.js?2d04:287)

Changing to normal axios request inside async function, works as expected

I think data needs to return error as well or the fail function will complain

Currently, when requests are made with url placeholders, the placeholder values are always submitted to the server as part of the data. This is in many cases undesirable.

Usually, the server does not actually need those to be posted, as they can be retrieved from the url. In the best case, the server will just ignore them. In the worst case, the request will throw an error because the data contains unknown values. In addition to this, it makes it hard to change this value: for a template /foo/:name, if we want to submit a change to the name value, we can't use this template: the url requires the old value, but the data requires the new value, so we have to use a template like /foo/:_name, and we're once again adding data to our request which the server must ignore.

Ideally, the data and parameters would be two separate parameters, but that would break a lot of existing code. Perhaps the POST-like requests can have an optional second parameter, where it defaults to current behaviour when it is not set?

Hi Dave,

Please is this possible?

export const api = new ApiGroup(
  axios.create({
    timeout: 900000,
    baseURL: rootURL
  }),
  {
    run_report: 'run_report/:report_name/:some_id',
  ....
}
})

when i try it:

    await api.run_report("report_name", 100).then(x => {
      this.res= x
    })

I expect to see: "https://localhost:44387/run_report/report_name/100"
but i get this: "https://localhost:44387/run_report/report_name/report_name"

Any help please

I really like the ApiEndpoint class and it makes working with REST a breeze.

However i'm not sure how I would add extra endpoints to every single instance of ApiEndpoint.

Lets say i'm using soft deleting so that when I delete an object it's simply marked as deleted rather than being removed from the database and I can request all deleted objects or restore a previously deleted object.

I might wind up with something like this:

export const comments = new ApiEndpoint(axios, '/api/comments/:id')
comments.add('restore', 'PATCH /api/comments/restore/:id')
comments.add('trashed', 'GET /api/comments/trashed')

But this gets repetitive:

export const comments = new ApiEndpoint(axios, '/api/comments/:id')
comments.add('restore', 'PATCH /api/comments/restore/:id')
comments.add('trashed', 'GET /api/comments/trashed')

export const posts = new ApiEndpoint(axios, '/api/posts/:id')
posts.add('restore', 'PATCH /api/posts/restore/:id')
posts.add('trashed', 'GET /api/posts/trashed')

export const tags = new ApiEndpoint(axios, '/api/tags/:id')
tags.add('restore', 'PATCH /api/tags/restore/:id')
tags.add('trashed', 'GET /api/tags/trashed')

export const users = new ApiEndpoint(axios, '/api/users/:id')
users.add('restore', 'PATCH /api/users/restore/:id')
users.add('trashed', 'GET /api/users/trashed')

Is there a way to customise the config of ApiEndpoint to always include my custom methods restore and trashed?

Or perhaps not to always include it, but a switch to include it or not?

Obviously I didn't wrangle the arguments properly and ActionMap expects a string.

Would this support a graphql endpoint?

Could I define my services that go to one url but have different payloads?

Hi guys! I would like to add a custom plugin to the existing plugins. This should work as far i saw from the docs:

// add to global plugins
import { plugins } from 'axios-actions'
plugins.changeCase = changeCase

but exports.plugins is not extandable. Im getting a error message in the browser:
TypeError: Cannot add property changeCase, object is not extensible
looks like, exports.plugins is marked as Readonly.

"axios-actions": "^4.0.2",

Allow path templates to take {id} placeholders as well as :id

Say we need a POST action for file upload, typically we would need to specify headers for example, with just axios i can do:

Api().post('upload/', formData, {headers: {'content-type': 'multipart/form-data'}})

How may we set specific headers on an item in ApiGroup?

export const widgets = new ApiGroup(axios, {
  view: 'api/products/widgets?category=:category',
  load: 'api/products/widgets/:id',
  upload: 'POST api/upload/:context' // need to add headers specific to just this function
})

It seems that data payloads might not be getting converted properly to query strings:

endpoint.get('foo/bar', { baz:1 })

Should result in:

foo/bar?baz=1

You have to pass the following to make it work, but I think this should be handled implicitly:

endpoint.get('foo/bar', { params: { baz:1 } })

Check that this should be the case and doesn't affect anything else.

• https://github.com/axios/axios#request-config

It seems we have a circular reference here:

A related technology, the API HAL format, has a placeholder format which contains a question mark:

http://example.com/api/users/{?id}

It would be useful to support this format in lieu of potentially supporting HAL.

const actions = {

  // url only
  users: 'users',

  // url and param only
  user: 'users?id=:id',

  // url and object
  create: {
    method: 'post',
    url: 'users',
    headers: { 'Content-Type': 'application/json' }
  },

  // url and param only
  update: {
    method: 'put',
    url: 'users/:id/',
    headers: { 'Content-Type': 'application/json' }
  },

  // url and param only
  delete: {
    method: 'delete',
    url: 'users/:id/',
    headers: { 'Content-Type': 'application/json' }
  },

  // method and url
  getMethodUrl: 'GET users/:id',

  // request object
  getObject: {
    method: 'get',
    url: 'users/:id/',
    headers: { 'X-Custom-Header': 'foobar' }
  }
};

Jest test:

  it(' users getObject', async () => {
    const response = await users.getObject({"id":2});
    expect(response.data)
      .toMatchSpecificSnapshot('./__snapshots__/endpoints_user_search.shot');
  });

results in a get request to the endpoint like this:

/v1/users/2/?id=2

where it in reality should be:

/v1/users/2/

How do you do it? I dont find any examples in the docs.

  const actions = {
    search: 'courses',
    update: 'POST products/widgets/:id',
    delete: 'DELETE products/widgets/:id',
  };

And the code below just replaces id.

widgets.use('update', 1)

But how can I send body data?

It would be useful to be able to pass additional headers for some calls, to be determined at runtime.

Not sure how to do this right now.

Ideas:

• pass headers as 3rd argument: endpoint.foo(1, { ... })
• have a group-level method to update all config when known: endpoint.headers({ ... }).call('foo')
• have a withHeaders() method that only sets headers for the next call
• walk any existing header values with payload and insert if template strings
• have the config itself be a function, which can be called, then returns an object, when called

I get this error

node_modules/axios-actions/dist/classes/services/Http.d.ts:19:88 - error TS2307: Cannot find module '../../../node_modules/axios/index'.

19 request(instance: ApiCore, config: AxiosRequestConfig, data?: any): Promise<import("../../../node_modules/axios/index").AxiosResponse>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error.

===========================================
My services file:

import { ApiGroup } from 'axios-actions'
import axios from 'axios'
import actions from './actions'

const service = new ApiGroup(axios, actions)
export default service

==================
I notice in the sample code the import for axios is like
import axios from './axios'

Is that a typo, or meaningful? If meaningful, where is that file..

==========
Additional Info:

I am trying it in a node.js/express setup possibly with graphql
Language is Typescript

==================
Thank you.