npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

api-layer

v2.2.0

Published

Asynchronous API organization library

Downloads

254

Readme

api-layer

api-layer is a very simple API organization library that helps you clearly define an abstraction layer for your API calls to ensure that they are easily mockable or overridden. You can also easily add a client-side API caching to greatly improve your apps performance. It has no dependencies and supports Typescript and Javascript.

Installation

Using npm:

$ npm i --save api-layer

Using yarn:

$ yarn add api-layer

Justification

Working on many large projects, most teams are split into back-end and front-end development teams. Typically, the two teams agree on RESTful API definitions and directly call the APIs using libraries such as fetch or Axios. Over time though, APIs may change parameters or add functionality, so someone has to update each API call in the front-end code to handle the new API signature. Additionally, during initial development, the front-end code will fail until the actual server/API call is available, so front-end developers will typically stub or mock the API until it is actually ready. The api-layer library was created to formalize this process and create a clearly defined abstraction layer for handling API calls, so your application always handles APIs in a standardized methodology that allows for easy mocking and testing. You can also add front-end API caching easily and simply using any 3rd party memoization function of your choosing.

Features

  1. Abstract all your API calls with a GET or SET asynchronous function. Your code now calls the abstracted functions instead of directly making API calls
  2. Easily update the API calls, since all of your front-end code calls the abstracted functions. You can change/update the actual call to your back-end without changing your front-end code.
  3. Create mock versions of your api, so all of your functions will have a test/mock version that does not need your back-end to work. This is useful for early development or unit testing purposes.
  4. You can override your api-layer functions during run-time, allowing you to perform dependency injection at the API layer and swap out functionality as needed. Very useful for unit testing purposes.
  5. Supports client-side API caching using any 3rd party caching/memoization library that you want to use.
  6. Perform data validation on API responses using any 3rd party library that you want to use. This is not directly supported in the api-layer, but sample code is provided.

Samples

A number of sample implementations have been provided so you can understand how to use the api-layer and enhance it with additional functionality. It is recommended to follow the implementation in the General and Recommend Usage in your application.

  1. General and Recommend Usage
  2. Testing and Overrides
  3. Client-side API caching
  4. Validating API responses
  5. Web Application Usage

React Query Sample

React Query is an excellent library for managing your asynchronous API calls in your application. Its conceptually aligned with api-layer and the two work seamlessly together to work with your BE and manage the API cache. Take a look at the sample for more details. React Query Sample

Typescript Types

Typescript types can be directly imported from the library. There should be no need to install separate type definitions.

CommonJS/ES Modules

This library provides both ESM and CommonJS builds. You should not need to worry about this, but in case you want to specifically use one or the other, you can do the following:

CommonJS

var ApiLibrary = require('api-library/lib/cjs');

ESM

import { createGetApi } from 'api-library/lib/esm';