<p>Since <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><code>fetch</code></a>) is pratically <a href="https://caniuse.com/?search=fetch">universally supported</a> on the most used web browsers, we may safely drop the use <a href="https://axios-http.com/">Axios</a> and other similar libraries in favor of <code>fetch</code>. In this article, I&#39;ll create a little wrapper for <code>fetch</code> that adds some conveniences to improve the developer experience.</p>
<h2>The code</h2>
<p>First, I will create a base function from where all the other shall be derived:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">// Extends the error class to throw HTTP Errors (any response with status &gt; 299)
class HTTPError extends Error {}

//            A generic type to type the response
// -----------\/
const query = &lt;T = unknown&gt;(url: RequestInfo | URL, init?: RequestInit) =&gt;
  fetch(url, init).then((res) =&gt; {
    if (!res.ok)
      throw new HTTPError(res.statusText, { cause: res })

    return res.json() as Promise&lt;T&gt; // &lt;--- Applying the generic type above
  })</div>
</code></pre><p>In the code above, we:</p>
<ol>
<li>Created a new <code>HTTPError</code> class, in order to throw <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">HTTP Errors</a> as they appear;</li>
<li>Use a <a href="https://www.typescriptlang.org/docs/handbook/2/generics.html">generic type</a> in order to be able to type the response of the request.</li>
</ol>
<p>Now, let&#39;s extend the query function to enable us to serialize and send data on our requests:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">const makeRequest
  // -----------\/ RequestInit['method'] is a union of all the possible HTTP methods
  = (method: RequestInit['method']) =&gt;
    //     | Those two generic types enables us to type the
    // \/--  data input (TBody) and output (TResponse) of the function.
    &lt;TResponse = unknown, TBody = Record&lt;string, unknown&gt;&gt;(url: RequestInfo | URL, body: TBody) =&gt;
      query&lt;TResponse&gt;(url, {
        method,
        body: JSON.stringify(body), // &lt;-- JSON Stringify any given object
      })</div>
</code></pre><p>In the code above, we:</p>
<ol>
<li>We build a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">closure</a> that, first, receive the method we want to call and then returns a function where we pass the <code>url</code> and the <code>body</code> (which is, by default, <em>JSON-stringified</em>) of the request.</li>
</ol>
<p>At this point, we can use our newly created functions like this:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">// Adding type for the Product entity
type Product = {
  id: number
  title: string
  description: string
  price: number
  discountPercentage: number
  rating: number
  stock: number
  brand: string
  category: string
  thumbnail: string
  images: string[]
}

// Getting a single product
const product = await query&lt;Product&gt;('https://dummyjson.com/products/1')
console.log(product)

// Creates a function that makes POST requests
const post = makeRequest('POST')

// Adding a new product
const newProduct = await post&lt;Product, Omit&lt;Product, 'id'&gt;&gt;('https://dummyjson.com/products', {
  title: 'New Product',
  description: 'This is a new product',
  price: 100,
  discountPercentage: 0,
  rating: 0,
  stock: 0,
  brand: 'New Brand',
  category: 'New Category',
  images: [],
  thumbnail: '',
})

console.log(newProduct)
</div>
</code></pre><p>Fully functional, but not very &quot;ergonomic&quot;. I believe that our code should also be able to accept a base URL for all the requests, make it easier to add things on the header (like an <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization">authorization token</a>) and an easy way to make <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PATCH"><code>PATCH</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PUT"><code>PUT</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/DELETE"><code>DELETE</code></a> requests.</p>
<p>Let&#39;s refactor the code above in order to make it easy to add a base URL and pass a common header to all requests:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">import { getToken } from 'my-custom-auth'

class HTTPError extends Error {}

const createQuery =
  (baseURL: RequestInfo | URL = '', baseInit?: RequestInit) =&gt;
    &lt;T = unknown&gt;(url: RequestInfo | URL, init?: RequestInit) =&gt;
      fetch(`${baseURL}${url}`, { ...baseInit, ...init }).then((res) =&gt; {
        if (!res.ok)
          throw new HTTPError(res.statusText, { cause: res })

         return res.json() as Promise&lt;T&gt;
       })

// This is the function where we define our base URL and headers
const query = createQuery(
  'https://dummyjson.com',
  {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${getToken()}`, // If you need to add a token to the header, you can do it here.
    },
  })


const makeRequest = (method: RequestInit['method']) =&gt;
  &lt;TResponse = unknown, TBody = Record&lt;string, unknown&gt;&gt;(url: RequestInfo | URL, body: TBody) =&gt;
    query&lt;TResponse&gt;(url, {
      method,
      body: JSON.stringify(body),
     })

export const api = {
  get: query,
  post: makeRequest('POST'),
  delete: makeRequest('DELETE'),
  put: makeRequest('PUT'),
  patch: makeRequest('PATCH'),
}</div>
</code></pre><p>In the code above, I:</p>
<ol>
<li>Created a <code>createQuery</code> function, a closure where I can set a default <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/URL"><code>url</code></a> and <code>init</code> parameters;</li>
<li>Created a new <code>query</code> function, where I use the <code>createQuery</code> function to define the base URL and the default parameters that all requests should have (note the dummy <code>getToken</code> function that adds a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication">Bearer Token</a> to each request);</li>
<li>In the end, I export the <code>api</code> object all the commonly used function to make requests.</li>
</ol>
<p>You may want to return the body of a request that returned an error, like, for example, when your backend returns the standardized <a href="https://datatracker.ietf.org/doc/html/rfc7807">problem details</a>. So, the refactored code would be:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">import { getToken } from 'my-custom-auth'

// Extends the return of the HTTPError class
class HTTPError extends Error {
  readonly response: any;
  readonly status: number;
  readonly statusText: string;

  constructor(status: number, statusText: string, response: any) {
    super(statusText);
    this.status = status;
    this.statusText = statusText;
    this.response = response;
  }
}

const createQuery =
  (baseURL: RequestInfo | URL = '', baseInit?: RequestInit) =&gt;
    &lt;TResponse = unknown&gt;(url: RequestInfo | URL, init?: RequestInit) =&gt;
      fetch(`${baseURL}${url}`, { ...baseInit, ...init }).then(async (res) =&gt; {
        // Now, we get the JSON response early
        const response = await res.json()

        if (!res.ok)
          throw new HTTPError(res.status, res.statusText, response);

         return response as TResponse
       })

// In this function, we define our base URL and headers.
const query = createQuery(
  'https://dummyjson.com',
  {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${getToken()}`, // If you need to add a token to the header, you can do it here.
    },
  })


const makeRequest = (method: RequestInit['method']) =&gt;
  &lt;TResponse = unknown, TBody = Record&lt;string, unknown&gt;&gt;(url: RequestInfo | URL, body: TBody) =&gt;
    query&lt;TResponse&gt;(url, {
      method,
      body: JSON.stringify(body),
     })

export const api = {
  get: query,
  post: makeRequest('POST'),
  delete: makeRequest('DELETE'),
  put: makeRequest('PUT'),
  patch: makeRequest('PATCH'),
}</div>
</code></pre><p>And now, you can use your new wrapper around fetch like this:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">type Product = {
  id: number
  title: string
  description: string
  price: number
  discountPercentage: number
  rating: number
  stock: number
  brand: string
  category: string
  thumbnail: string
  images: string[]
}

// GET https://dummyjson.com/products/1
api
  .get&lt;Product&gt;('/products/1')
  .then(console.log)
  .catch((err) =&gt; {
    if (err instanceof HTTPError) {
      // Handle HTTP Errors
      console.error('HTTPError', err);
    }

    if (err instanceof SyntaxError) {
      // Handle error parsing of the response
      console.error('SyntaxError', err);
    }

    console.error('Other errors', err);
});</div>
</code></pre><h2>Final thoughts</h2>
<p>The code above is not full-featured as <a href="https://axios-http.com/">Axios</a>, <a href="https://github.com/developit/redaxios">redaxios</a>, <a href="https://github.com/sindresorhus/ky">ky</a> or <a href="https://github.com/elbywan/wretch">wretch</a>, but, most of the time, it is all need when I&#39;m working with React using <a href="https://swr.vercel.app/">SWR</a> or <a href="https://tanstack.com/query/latest">TanStack Query</a> (and on the backend too). Give me your thoughts about the code and show me your improvements (if you want). You can access this code on this <a href="https://gist.github.com/DouglasdeMoura/59ce418672d0e33dda7056b382b01de9">gist</a>.</p>


Using fetch with TypeScript

<p>Recently, I created a package with the <a href="https://eslint.org">ESLint</a> settings I like to use in my React projects, as I was tired of always having to configure it when I start new React projects. Publishing a NPM package is just a matter of running <code>npm publish</code> on the directory of your package (considering, of course, that you already have an NPM account and is authenticated on your terminal). But I wanted to automatize this publishing everytime I created a new release.</p>
<p>In order to do that, I used the following GitHub Action:</p>
<pre><code class="highlited-code-wrapper langyaml"><div class="highlited-code" data-language="yaml"># File: .github/workflows/npm-publish.yml

# This workflow will publish a package to NPM when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Publish Package to npmjs

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}</div>
</code></pre><p>If you read the YAML file above (that you should put on the <code>.github/workflows/npm-publish.yml</code> directory of your git repository), you should have noted that the environment variable <code>NODE_AUTH_TOKEN</code> should be defined. Create a new automation access token on the control panel of NPM:</p>
<ol>
<li><p>Access your NPM account and click in &quot;Access tokens&quot;:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hddbdiev3xhhrl0s09km.png" alt="Access tokens on NPM"></p>
</li>
<li><p>Name your new access token and select the &quot;Automation&quot; type for it:</p>
</li>
</ol>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oect8iqd17igcbnrrg1.png" alt="Creating access token on NPM"></p>
<ol start="3">
<li>Go to your GitHub repository, click in &quot;Settings &gt; Secrets &gt; Actions &gt; New repository secret&quot;, name it as NODE_AUTH_TOKEN and paste the access token you just got from NPM:</li>
</ol>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv7pw3j8elyjeoaeehif.png" alt="Create a new secret on the GitHub repository"></p>
<ol start="4">
<li>Create a new release for your package. This should trigger our GitHub Action and publish to NPM.</li>
</ol>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31fsgle783ujl75stld1.png" alt="Creating a new release on GitHub"></p>


Use GitHub actions to publish your package on NPM

<p>Have you ever faced the situation where the layout of your beautifully crafted interface &quot;breaks&quot; if the image (depeding on the quality of your user&#39;s connections) takes some time to load? Something like the example below:</p>
<p><a href="https://media.giphy.com/media/Q7B0kOHlC7akJmwTCW/giphy.gif"><img src="https://media.giphy.com/media/Q7B0kOHlC7akJmwTCW/giphy.gif" /></a></p>
<p>This happens because the browser has no clue about the dimensions of the image you want to display on your content beforehand.</p>
<p>The easiest way to solve this issue is using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio"><code>aspect-ratio</code></a> property to tell the browser how much space (based on the user&#39;s size display) it should reserve before the image is loaded. Check the difference:</p>
<pre><code class="highlited-code-wrapper langcss"><div class="highlited-code" data-language="css">img {
/* Makes all images responsive */
  width: 100%;
  height: auto;

/*
  Here, I'm using the image's width and height,
  but you can come up with diference aspect ratios.
*/
  aspect-ratio: 760 / 235;
}</div>
</code></pre><p><a href="https://media.giphy.com/media/X4dBoFehuhSrpUIdIA/giphy.gif"><img src="https://media.giphy.com/media/X4dBoFehuhSrpUIdIA/giphy.gif" width="100%" /></a></p>
<p>So, it solves the sudden layout change, but we can do even better do better adding an animated background.</p>
<h2>Displaying an animated background</h2>
<p>You can give a hint for the user that the blank space on your app should be filled with something by adding a background color or animating the transition between two o more colors, like in the example below:</p>
<iframe height="300" style={{width:'100%'}} scrolling="no" title="Animated placeholder" src="https://codepen.io/douglasdemoura/embed/RwyWzEr?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/douglasdemoura/pen/RwyWzEr">
  Animated placeholder</a> by Douglas Moura (<a href="https://codepen.io/douglasdemoura">@douglasdemoura</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<p>And our code will look like this:</p>
<pre><code class="highlited-code-wrapper langcss"><div class="highlited-code" data-language="css">:root {
  /*
  Set the default aspect ratio. You can change
  this CSS variable per class/id or event
  creating diferente classes.
  */
  --aspect-ratio: 16/9;
}

img {
/* Makes all images responsive */
  width: 100%;
  height: auto;
}

/* Put all your images inside this container */
.image-container {  
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  animation: background-loading .8s linear infinite alternate;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

/* The placeholder animation */
@keyframes background-loading {
  0% {
    background-color: #f9fafb;
  }
  100% {
    background-color: #d1d5db;
  }
}</div>
</code></pre><p>And this is the result (check the code on <a href="https://codepen.io/douglasdemoura/pen/RwyWBOR">CodePen</a>):</p>
<img src="https://media.giphy.com/media/9yYPBL1X9wnAKzhVfE/giphy.gif" />

<p>Yet, this can be even better by displaying a colorful background that matches the image colors.</p>
<h2>Displaying colorful image placeholders</h2>
<p><a href="https://github.com/woltapp/blurhash">BlurHash</a> is a compact representation of a placeholder for a image. You use it to process your image before sending it to the browser and you&#39;ll get a string of 20-30 characters that the algorithm can turn into a blurred image that you can show to your user before the actual image is downloaded. Check how it looks like:</p>
<img src="https://media.giphy.com/media/1RSpYFokgWI2tKRKHk/giphy.gif" />

<p>I have implemented that last effect in React for the sake of simplicity and time, but you can re-implement it in whatever framework you like. Just pay attention to the <code>onLoad</code> event that changes the opacity of the image.</p>
<iframe src="https://stackblitz.com/edit/vitejs-vite-enczef?embed=1&file=src/Image.module.css" height="500" style={{width: '100%'}} scrolling="no" title="Animated placeholder"  frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

Create beautiful placeholders for your images

<p>Most of the work needed to create custom HTML elements that fit the design system of your company resides styling and adding your own props. So, let&#39;s say you have to create a custom <code>Button</code>, that should receive a <code>children</code> prop and should have DOM access via <a href="https://reactjs.org/docs/refs-and-the-dom.html">ref</a>. That&#39;s how you can do it:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">import { forwardRef } from 'react';

type ButtonProps = {
  loading?: boolean; // custom prop
} &amp; React.PropsWithChildren&lt;React.ComponentPropsWithRef&lt;'button'&gt;&gt;;

const Button: React.FC&lt;ButtonProps&gt; = forwardRef(
  ({ loading, children, ...props }, ref) =&gt; {
    return (
      &lt;button data-loading={loading} {...props} ref={ref}&gt;
        {children}
      &lt;/button&gt;
    );
  }
);

export default Button;</div>
</code></pre><p>We use the <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d076add9f29db350a19bd94c37b197729cc02f87/types/react/index.d.ts#L822"><code>PropsWithChildren</code></a> generic interface that gives the <code>children</code> prop and receive <code>React.ComponentPropsWithRef&lt;&#39;button&#39;&gt;</code>, that passes all props that a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><code>button</code></a> can receive.</p>
<p>Of course, you can change the interface <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d076add9f29db350a19bd94c37b197729cc02f87/types/react/index.d.ts#L834"><code>ComponentPropsWithRef</code></a> for <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d076add9f29db350a19bd94c37b197729cc02f87/types/react/index.d.ts#L838"><code>ComponentPropsWithoutRef</code></a> and drop the <a href="https://reactjs.org/docs/forwarding-refs.html"><code>forwardRef</code></a> function on the definition of your component (although, I do not recomend it - <em>refs</em> may be useful later on your application):</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">type ButtonProps = {
  loading?: boolean; // custom prop
} &amp; React.PropsWithChildren&lt;React.ComponentPropsWithoutRef&lt;'button'&gt;&gt;;

const Button: React.FC&lt;ButtonProps&gt; = ({ loading, children, ...props }) =&gt; {
  return (
    &lt;button data-loading={loading} {...props} ref={ref}&gt;
      {children}
    &lt;/button&gt;
  );
};

export default Button;</div>
</code></pre><p>You may, even, drop the interface <code>PropsWithChildren</code>, but on doing that, you&#39;d have to implement the <code>children</code> prop by yourself:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">type ButtonProps = {
  loading?: boolean; // custom prop
  children?: React.ReactNode;
} &amp; React.ComponentPropsWithoutRef&lt;'button'&gt;;

const Button: React.FC&lt;ButtonProps&gt; = ({ loading, children, ...props }) =&gt; {
  return (
    &lt;button data-loading={loading} {...props} ref={ref}&gt;
      {children}
    &lt;/button&gt;
  );
};

export default Button;</div>
</code></pre><p>Want more? Check the live implementation on <a href="https://stackblitz.com/edit/vitejs-vite-warc15?file=src%2Fcomponents%2Fbutton.tsx&terminal=dev">StackBlitz</a></p>


Douglas Moura

Douglas Moura

#typescript

Using fetch with TypeScript

Use GitHub actions to publish your package on NPM

Create beautiful placeholders for your images

How to extend HTML elements with React