`promisifiedDataFetch` function in Meshery codebase.

In this article, we review promisifiedDataFetch function in Meshery codebase. We will look at:

1. What is promisifiedDataFetch?

2. How is this used?

I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Meshery codebase and wrote this article.

What is promisifiedDataFetch?

In meshery/ui/api/credentials.js, you will find the following code snippet:

import { promisifiedDataFetch } from 'lib/data-fetch';

export const getCredentialByID = async (credentialID) => {
  return await promisifiedDataFetch(`/api/integrations/credentials/${credentialID}`);
};

You will find this function’s definition in lib/data-fetch, evident from the import

/**
 * promisifiedDataFetch adds a promise wrapper to the dataFetch function
 * and ideal for use inside async functions - which is most of the functions
 * @param {string} url url is the endpoint
 * @param {Record<string, any>} options HTTP request options
 * @returns
 */
export function promisifiedDataFetch(url, options = {}) {
  return new Promise((resolve, reject) => {
    dataFetch(
      url,
      options,
      (result) => resolve(result),
      (err) => reject(err),
    );
  });
}

The comment above is pretty self explanatory. I would be more interested in finding out how this dataFetch method is defined. This dataFetch function is defined in the same file at the top and is defined as shown below:

const dataFetch = (url, options = {}, successFn, errorFn) => {
  // const controller = new AbortController();
  // const signal = controller.signal;
  // options.signal = signal;
  // setTimeout(() => controller.abort(), 10000); // nice to have but will mess with the load test
  if (errorFn === undefined) {
    errorFn = (err) => {
      console.error(`Error fetching ${url} --DataFetch`, err);
    };
  }
  fetch(url, options)
    .then((res) => {
      if (res.status === 401 || res.redirected) {
        if (window.location.host.endsWith('3000')) {
          window.location = '/user/login'; // for local dev thru node server
        } else {
          window.location.reload(); // for use with Go server
        }
      }

      let result;
      if (res.ok) {
        result = res.text().then((text) => {
          try {
            return JSON.parse(text);
          } catch (e) {
            return text;
          }
        });

        return result;
      } else {
        throw res.text();
      }
    })
    .then(successFn)
    .catch((e) => {
      if (e.then) {
        e.then((text) => errorFn(text));
        return;
      }
      errorFn(e);
    });
};

Nothing fancy here, just a simple fetch request.

How is this used?

Since we found that promisifiedDataFetch is invoked in getCredentialByID function, we just have to find out where this getCredentialByID is invoked.

I found that this getCredentialByID is used in meshery/ui/pages/_app.js.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/meshery/meshery/blob/master/ui/api/credentials.js

2. https://github.com/meshery/meshery/blob/master/ui/lib/data-fetch.js#L55

3. https://github.com/meshery/meshery/blob/master/ui/pages/_app.js#L271