Developer Notes

JavaScript: NPM Registry API query

January 13, 2021

Few times in my life I needed to fetch some data from the NPM registry and display some information for a given package, versions, maintainers, last update and so on. As easy to do that I never try to write something that I could re-use.

So here is it, below is super simple class to do that, and let me write my functions only once. The method package could be re-written with any lib in mind - in this case I use axios but could be done in the same way with fetch or node-fetch

1public package(name: string) {
2  return fetch(`${this.registry}${name}`)
3    .then(response => response.json())
4    .then(response => this.dataWrapper(response.data))
5}

Or even with XMLHttpRequest if needeed to have less dependencies, a bit more code but still simple.

1public package(name: string) {
2  return new Promise((resolve, reject) => {
3    const request = new XMLHttpRequest();
4    request.open("GET", `${this.registry}${name}`);
5    request.responseType = 'json';
6    request.onload(() => {
7      if (this.status === 200) {
8        return resolve(this.response)
9      }
10      reject(false)
11    });
12    request.send();
13  })
14}

dataWrapper is a bit overkill, but I often require to fetch this type of the data so why not have them already defined as methods, and never have to think about it.

1import axios from "axios";
2
3class NPMQuery {
4  registry: string = "https://registry.npmjs.org/";
5
6  public package(name: string) {
7    return axios.get(`${this.registry}${name}`)
8      .then(response => this.dataWrapper(response.data))
9  }
10
11  private dataWrapper(data: Record<any, any>) {
12    return {
13      /* Get raw response data - for everything else */
14      raw: (): Record<string, any> => data,
15      /* Array of veresions as string */
16      versions: (): string[] => Object.keys(data.versions),
17      /* Single version information */
18      version: (version: string): Record<string, any> => data.versions[version],
19      /* Array of tags as string */
20      tags: (): string[] => Object.keys(data['dist-tags'])
21    }
22  }
23}
24
25const npm = new NPMQuery();
26
27npm.package("@clr/angular").then((r) => {
28  console.log("Versions", r.versions());
29});

As a result we gonna have something like that:

1Package {
2  name: '@clr/angular',
3  version: '4.0.0',
4  description: 'Angular components for Clarity',
5  homepage: 'https://clarity.design/',
6  keywords: [ 'ng-add', 'clarity', 'angular', 'components' ],
7  repository: { type: 'git', url: 'git@github.com:vmware/clarity.git' },
8  peerDependencies: {
9    '@angular/common': '^10.0.0',
10    '@angular/core': '^10.0.0',
11    '@clr/ui': '4.0.0'
12  },

Having a list of version in the form of Array is useful for me in the cases when I need to create dropdowns or list package versions.

1npm.package("@clr/angular").then((r) => {
2  console.log("Versions", r.versions());
3});

Result could be something like that:

1Versions [
2  '0.11.0-alpha.1',  '0.11.0-beta.1', '0.11.0-rc.1',   '0.11.0',
3  '0.11.1',          '0.11.2',        '0.11.2-patch',  '0.11.3',
4  '0.11.4',          '0.11.5',        '0.11.6',        '0.11.7',
5  '0.11.7-patch.1',  '0.11.8',        '0.11.9',        '0.11.10',
6  '0.11.11',         '0.11.12',       '0.11.13',       '0.11.14',
7  '0.11.15',         '0.11.16',       '0.11.17',       '0.11.18',
8  '0.11.18-patch.1', '0.12.0-beta.3', '0.11.19',       '0.12.0-beta.4',
9  '0.12.0-rc.1',     '0.11.20',       '0.11.21',       '0.12.0-rc.2',
10  '0.12.0',          '0.11.22',       '0.12.1',        '0.11.23',
11  '0.12.2',          '0.11.24',       '0.12.3',        '0.12.3-patch.1',
12  '0.12.3-patch.2',  '0.11.25',       '0.12.4',        '0.12.5',
13  '0.12.6',          '0.11.26',       '0.11.27',       '0.12.7',
14  '0.11.28',         '0.12.8',        '0.13.0-beta.1', '0.11.29',
15  '0.12.9',          '0.13.0-beta.2', '0.12.10',       '0.11.30',
16  '0.12.11',         '0.13.0-rc.1',   '0.12.12',       '0.13.0',
17  '0.13.1-patch.1',  '0.13.2',        '0.13.3',        '0.13.4',
18  '0.12.13',         '0.13.5',        '0.11.32',       '0.12.14',
19  '0.13.6',          '0.11.33',       '0.12.15',       '0.13.7',
20  '1.0.0-beta.1',    '0.13.8',        '1.0.0-beta.2',  '0.11.34',
21  '0.12.16',         '0.13.9',        '0.13.10',       '1.0.0-rc.1',
22  '1.0.0',           '1.0.1',         '1.0.2',         '1.0.3',
23  '1.0.3-patch',     '1.0.4',         '1.0.5',         '1.1.0',
24  '2.0.0-beta.1',    '0.13.11',       '1.1.1',         '1.1.2',
25  '2.0.0-beta.2',    '1.1.3',         '2.0.0-rc.1',    '2.0.0-rc.2',
26  '2.0.0',           '2.0.1',         '1.1.4',         '2.0.2',
27  ... 91 more items
28]

My name is Bozhidar Dryanovski and I'm a Software Engineer at Clarity
You should follow me on Twitter or Check my work at Github