SLUG

Unlike gardens, where slugs are damaging to plant life; a slug in your API can be very helpful to your fellow developers in order to better traverse your API garden. So what exactly is a slug? How can we go about using them? and what are the real world applications?

What is it?

You ever start working with an extensive API, and wonder how they even keep track of their own API? Example, my final project with Flatiron I incorporated the YELP API in order to access nearby coffee shops, in order to post these to my backend as part of my user story, I had to send back their unique ID’s. The YELP API is so large that unfortunately these unique ID’s also become very long, which made it difficult to work with. This is where a slug comes into play. A slug is a unique, human readable ID used to recognize a resource with-in an API. These become extremely useful to fetch information from an API instead of having to rely on just the ID which tends to be a long string of numbers, letters and even symbols.

Life is good, but it can be better. — Max Lord

Examples

Typically when you fetch an API, or even build your own API you’ll see something like this…

  "Game": {
  "id": integer,             //unique identifier
  "name": string,
  "image": string,           //(URL)
  "released": integer,           
  "category": string,        //unique category
  "platform": string,        //unique platform
},
  "Category": {               
  "id": integer,
  "name": string,
},
 "Platform": {
 "id": integer,
 "name": string,
}
...

This is great, we are getting an abundance of information that can be used to build out our applications. However, in programming if there is anything I have learned, you can always find ways to make things better. This is where adding a slug creates better developer experience.

"Game": {
  "id": integer,        
  "slug": string,            
  "name": string,
  "image": string,           
  "released": integer,           
  "category": string,       
  "platform": string,        
},

translation ….

"Game": {                         
  "id": 12x592r34t0,        
  "slug": "starcraft-2",            
  "name": "Starcraft 2",
  "image": "https://cdn.ndtv.com/tech/gadgets/starcraft_2...",           
  "released": "2015-11-10",           
  "category": "Real Time Strategy",       
  "platform": "PC",        
},
...

Real World Application

Recently I started working on a new project, taking advantage of a Slug to help create a new application. The RAWG API is a free, extensive library of Gaming information. They also include Slugs in all their endpoints such as Games, Categories or Platforms. Being able to use simple keys and values like this, allowed for better readability and create a cool search component, where you could type in the name of the game you were searching for and it would give you all the fitting results.

...
setResults([])
fetch(`https://rawg.io/api/games?search=${slug}`)
.then(resp => resp.json())
.then(({results}) => {
results === undefined ? alert('no games found') : setResults(results)
})
setSearch()
}
....

Happy coding!