DRY-out your fetch()
Tags: beginners, programming, api, productivity
Published: 2022-10-11 15:14:26


If you ever find yourself working with an [API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), you will undoubtably have to learn and use the `fetch()` method. Using `fetch()` allows developers to access  API's and use their data in multiple ways. For those curious, the syntax for your average `fetch()` post method goes as follows:

![basic fetch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asfxfae3ul2bzcb5lwky.png)

Now what you chose to do with that extracted data can vary greatly. For this example, I am just `console.log()`-ing all of it. This can be very useful to see if your `fetch()` is working correctly. 

`fetch()` is an incredibly important method and allows us Devs to access our websites backend data in many ways...

 Most commonly, we need to

- Create data,

- Read data,

- Update data 

- Delete data

This can be easily memorized using the acronym "CRUD". As developers, we work with CRUD all the time. So much so that one might say we often find ourselves knee-deep in CRUD while creating our projects. Luckily, there is a solution to keep us out of so much CRUD. 

- Don't

- Repeat

- Yourself!

No i'm not just yelling at you. This is actually another acronym, "DRY", and it can help keep you from drowning in the CRUD. I have learned a fun little technique that can make your code more efficient, modular, and keep it DRY. Use a function to declare your `fetch()` requests! 

On the simplest scale, it would look like this, 

![simple fetch function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xaw6vl6est5apzuimpp.png)
Let's break this down. This is the exact same `fetch()` order as the previous example. What makes this so cool though is we set the fetch's URL to a parameter allowing it to be changed depending on where your fetching your data!

If above this function we wrote...

```
const url = 'http://example.com/movies'
```... this would return the exact same data as the first, "boring" `fetch()` above! 

We can still make this even more dynamic by just calling the function and passing our desired url as a parameter. 
![cool fetch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qakeatqt6k30vprj3y9c.png)

Even though this is super useful, you may be thinking "whatever, its not that hard to type up a correctly syntax-ed fetch every time I need it one". I would agree however, when the fetch's become more complicated, you will surely start to sink into the CRUD. Let's look at some other, more complex `fetch()`'s and see how useful it is to just pass info for it as parameters. 


![complex fetch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tm5km4cbfpagcyngwk9n.png)


![another complex fetch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmtiljgn8c34ugb7cuh8.png)


When tapping into CRUD to both update and create new data, the `fetch()` syntax becomes more intensive and harder to remember the exact details. It's much easier to create these fetches as functions and pass the necessary info as parameters. The real fun part is how customizable it you can make it. In the above example, I created several parameters to allow for more optimization with my `fetch()` function. 

How you write your code is up to you. But if you want to keep yourself from living a life knee-deep in CRUD, I think this technique is a great start. Maybe down the road I'll discover an even better way to DRY-out my CRUD. 

Thank You!