In my article, "Architecting Frontend Projects To Scale", we took a look at organizing our frontend code base in a way to make scaling and succeedi...
For further actions, you may consider blocking this person and/or reporting abuse
Great read. As a junior developer it helped understand the importance of building scalable architecture. Its so easy to just bundle everything up in single file but it surely has long term repercussions. I have experienced it.
Cheers !!
Hi Michael -- interesting post.
What is
prefixin your examples? I'm unsure becauseprefixusually implies "placed before", but it comes after the base URL in your examples. Suffix?Would what you've outlined here be better described as a clear separation of concerns between the data gathering and the view logic? Furthermore, the components themselves are unconcerned about how it acquires its data so long as it gets them?
I do like the provider abstraction, though! However, the downside, from what I can tell, is that it is a light wrapper around Axios. I think the methods defined there are typically a part of what I describe below that's found in your core logic. I think you're trying to enforce an interface (which is good), but the downside of this, is more providers aren't added, so whatever pattern has been established means almost nothing at all. However, if there certainly are, this idea that you're capturing is known as the strategy pattern, that often comes up for anyone that's worked with an OAuth library to offer delegated auth.
I think what you've named,
ApiCoreor core is akin to the repository pattern -- providing an interface to perform CRUD operations against a resource.You're right,
prefixwould be better changed toendpointto make it more descriptive.This can be considered a light wrapper to axios but can really be changed to any provider you want pretty easily.
Thanks! I appreciate your experience and feedback!
An endpoint usually encompasses the entire URL. If you're up for a suggestion, mine would be
resourcein the canonical API and RESTful nomenclature sense. The resource that you're using as an example appears to be tasks resources.Fair enough. If I added or created a new provider, rather than swapping/modifying existing code and possibly introducing a regression -- I'm typically for keeping legacy things around, doing a partial release to end users for something new, address any bugs, then switch over and remove the old. I like your emphasis on clean architecture which alludes me to the ideas surrounding "Clean Code" by "Uncle Bob" who is often attributed for the SOLID acronym. You may enjoy this repository: github.com/ryanmcdermott/clean-cod...
I like resource better, thanks. Especially since this abstraction directly address the resource in question in addition to any custom endpoints related to the resource. Good catch.
Thanks for the article! Looks like a really good read. 😄
Happy coding, Michael! And thanks for sharing. These sorts of pieces keep me in the loop in JS land that I haven't worked in for about two years :)
Thanx for sharing the link David
Hi Michael, this article helped me understand the abstraction layer you have added over APIs middleware.
I have implemented this in my recent project.
Thanks for sharing.
Great read.
How to check if the api return an error or data?
Here for example:
function _createTask(task) {
apiTasks.post(task).then((res) => {
// state logic
});
}
Add a .catch after your .then
Don't work, because it goes always into the 'then' branch. I think this logic issue is caused by core.js that return the with the same instruction the good or bad value.
.getAll()
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err.code);
});
I can't say for certain since there are various scenarios in which your code doesn't register the error as a thrown error, bad response, etc... of which I don't know what your code is.
Example: Many users assume a 4xx error response from axios should throw an error and be caught by the
.catch. This is not the case unfortunately and you have to update the axios configurations to change how response codes are handled.Ok, I tried to switch off the api server and the pointer goes in the catch in the api core but the high level api get the error in the then branch. How to different the bad/good response?
I got an error on exporting individual api when creating a custom function.
but if directly export it, it works. I don't know what's wrong.
You'll either want to on line 3
export const skillsApior on line 17export default skillsApi.hi did you try to create customCall? can you show me how you done
task-api-example.js has one. You can add your axios logic there.
can you provide any example for custom call api?
task-api-example.js has one. You can add your axios logic there.
what is the index.js for?
A typical pattern for exporting all files within a folder instead of having a bunch of different imports is done via an
index.js. You import all sibling files to this file and then export from there.Thanks, btw thanks for the tip above really helped me
oh i see
the best way to implement AbortController to cancel requests??, only pass as param?
Yeah, you definitely could customize your api implementation to cater to that.
Where Do you put the "header" axios config ?
One option is to put it (in this example) in the provider.js file.
Great Post. I am wondering where should i put my Login and signup handler. Because they are not reusable but they are related to api functionality. Any suggestion!?
Yeah, you could add them in as part of the auth (namespaced) portion of your api functionality.
I am getting...
undefined is not an object (evaluating '_provider.default.getSingle')
Since I can't see your code, the first assumption is that an incorrect syntax in the import or implementation was made.