Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 17, 2021 09:32 am GMT

Managing API layers in Vue.js with TypeScript

Motivation

Almost every Single-Page Application at some point needs to get some data from the backend. Sometimes there are several sources of data like REST APIs, Web Sockets etc. It's important to manage API layer in the right way to make it simple and easy to use in any place of your application no matter if it's store, component or other source file.

TLDR

If you already have some experience in development and want to check the solution here is the FancyUserCard example. If some things would be hard to understand feel free to check the detailed step-by-step path.

Bad

An example of API calls in componentPerforming API calls in the component is bad because:

  • You make your components large and filled with logic that has nothing to do with the component itself which violates SRP;
  • Same API methods could be used in different components which causes code duplication and violates DRY.
  • You are importing dependencies globally and it violates DI principle.
  • Every time when API changes, you need to manually change every method that is needed to be modified;

Good

To make things work better we need to slightly change our code and move all the API calls into separate place.

users.api.ts

Users API layer fileIn this case we:

  • Have one single AxiosInstance that is configured to work with /users API branch and our code becomes modular;
  • Have all methods located in one place so it's easier to make changes and to reuse them in different components without duplicating code;
  • Handle successful request as well as request failure and make us able to work with both error and data object depending on request status;
  • Provide standardized response for each method so we can work with them in one way.

FancyUserCard.vue

FancyUserCard component that imports API methodsAnd in our component:

  • We are not dealing with http layer at all so our component is only responsible for rendering data that comes from API layer;
  • Methods return both errors and data so we can notify user if something went wrong or simply use data that was returned by method.

Advanced

API methods incapsulated within a classSome final changes:

  • The API call method was moved to reduce code duplication and all the methods are called using this private method.

Some other ideas

The approach shown above is enough to handle standard API layer workflow. If you want to make it even more flexible you could think about implementing some ideas below:

Creating abstraction over HTTP layerCreating abstraction over HTTP layerAbout the idea:

In the example you can see that now we have an interface for our HttpClient so we could have as many implementations as we need. It works if we have different Http clients like axios, fetch, ky and if we will need to migrate from one to another we would simply need to rewrite our HttpClient implementation in one place and it will be applied automatically in any place where we use our service;

Create a factoryCreate a factoryAbout the idea:

If you have few different data sources you could use some sort of factory to create the instance with needed implementation without an explicit class declaration. In this case you just need to provide a contract interface and then to implement each API methods as you want.

Conclusions

Hope that this article was useful for you. Do not hesitate to leave a comment if you have some other ideas or if there are any questions about the content of this post. I will update this post with detailed information about the problem, the solutions and refactoring process soon.
Cheers!


Original Link: https://dev.to/blindkai/managing-api-layers-in-vue-js-with-typescript-hno

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To