Building Type-Safe Random GIF Generator with feTS
Tags: fets
Published: 2024-05-02 13:14:39

> This article was published on Thursday, May 2, 2024 by [Tuval Simha](https://twitter.com/SimhaTuval) @ [The Guild Blog](https://the-guild.dev/)

Embarking on my journey as a developer, I sought a project that would not only be educational but
also enjoyable. As a junior developer, I encountered the challenges of working with REST APIs,
particularly the lack of type safety. This led me to explore feTS, a tool designed to simplify REST
API development, offering type safety, efficiency, and seamless integration with TypeScript and
OpenAPI.

## Exploring feTS: Elevating Type Safety in REST API Development

feTS, derived from 'Fetch' and 'TypeScript,' emerged as a game-changer in the realm of REST APIs. By
leveraging TypeScript and the OpenAPI specification, feTS ensures clarity in data exchange between
the client and server, significantly reducing errors during development. This blog post delves into
a practical example – building a Random Gif Generator – to showcase how feTS transforms the
development experience.

## Building a Random Gif Generator

### Step 1: Getting Started with Giphy API

To demonstrate the power of feTS, let's create a Random Gif Generator using the Giphy API. Begin by
obtaining a free API key from the Giphy developer portal here.

### Step 2: Integrating OpenAPI Definitions into TypeScript

Incorporate the Giphy API's OpenAPI definitions into a TypeScript file, exporting them with the as
const modifier for strong typing. This integration ensures seamless cooperation with feTS. You can
find the Giphy OpenAPI definitions here.

### Step 3: Installing feTS and Creating a Client

Install feTS using your preferred package manager and create a client using the createClient
function. The client instantiation involves providing the normalized OpenAPI types and specifying
the Giphy API endpoint.

```typescript
import { createClient, type NormalizeOAS } from 'feTS'
import openAPIDoc from './openapi'

export const client = createClient<NormalizeOAS<typeof openAPIDoc>>({
  endpoint: 'https://api.giphy.com/v1'
})
```

<Callout type="info" emoji="📦">
  You can find the complete OpenAPI definitions for the Giphy API
  [here](https://api.apis.guru/v2/specs/giphy.com/1.0/openapi.json)
</Callout>

### Step 4: Building Endpoints with feTS

```typescript
export async function fetchRandomGif() {
  const response = await client['/gifs/random'].get({
    query: {
      api_key: 'YOUR_API_KEY_HERE'
    }
  })

  const gifData = await response.json()

  return gifData
}
```

### Step 5: Utilizing the Gif Data

Now, you can easily use the fetchRandomGif function in your application to obtain random gif data.
Leverage the type safety provided by feTS to ensure accurate handling of the API response.

```typescript
import { useQuery } from 'react-query'
import { fetchRandomGif } from './feTS/endpoint'

function App() {
  const { data, isLoading, error } = useQuery('randomGif', fetchRandomGif)

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div>
      <img src={data?.data.image_url} alt="Random Gif" />
    </div>
  )
}

export default App
```

## Advantages of feTS in Gif Generator Development

### Clarity in Development

feTS simplifies endpoint definitions, making API navigation clear and straightforward. The
structured interface enhances collaboration and understanding among developers.

![Autocomplate](https://the-guild.dev/blog-assets/building-random-gif-generator-with-fets-and-giphy/auto.png)

### Speedy Implementation

With feTS, manual response parsing becomes a thing of the past. Auto-generated API clients and
TypeScript types accelerate the development process.

### Type Safety at Its Best

Enjoy robust type safety throughout the development cycle. feTS catches potential issues at compile
time, ensuring a reliable and error-free application.

## Conclusion: Elevating Gif Generator Development with feTS

Building a Random Gif Generator using feTS exemplifies the tool's prowess in enhancing type safety,
clarity, and efficiency in REST API development. By adopting feTS, developers can create
applications with confidence, focusing on features rather than worrying about type-related
challenges.

<div className="flex w-full flex-row justify-center">
  ![Demo](https://the-guild.dev/blog-assets/building-random-gif-generator-with-fets-and-giphy/gif.gif)
</div>

As you embark on your journey with feTS, remember that it's not just a tool; it's a paradigm shift
towards seamless and elevated REST API development. Happy coding!

<Callout type="info" emoji="🚀">
  The full code for this Random GIF Generator example is available on
  [GitHub](https://github.com/TuvalSimha), and live demo can be found
  [here](https://fets-giphy-app.vercel.app/).
</Callout>