davestewart / axios-actions Goto Github PK
View Code? Open in Web Editor NEWBundle endpoints as callable, reusable services
Home Page: https://axios-actions.netlify.com
Bundle endpoints as callable, reusable services
Home Page: https://axios-actions.netlify.com
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.
It seems we have a circular reference here:
axios-actions/src/classes/ApiCore.ts
Line 1 in 1dac8fe
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:
withHeaders()
method that only sets headers for the next callI 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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.