Sinatra with Active Record: GET requests using "include:"
Tags: beginners, ruby, react, programming
Published: 2022-10-27 16:27:18


_Happy Spooky Season!_ In this blog, I will be discussing a Ruby Sinatra backend with a React frontend. In this phase of my bootcamp, we started learning about the backend and things are finally starting to all come together. So I will be going over what GET requests look like from both backend and frontend along with how helpful `include` can be! 
<figure>
<img src="https://64.media.tumblr.com/8ab8b0df76dcc7327c9ceb3cfccb65e7/1de5e488cfed2df2-ea/s540x810/c535ff8a539c8374091db244666166d9de576e83.gifv"/>
<figcaption> Hades gives spooky vibes right? </figcaption>
</figure>

## Frontend GET request  
First, lets quickly review what a GET request is. <blockquote> GET is an HTTP request method that is used to obtain resources from servers [1].</blockquote> A GET request simply put "gets" data from your server, which in our case is our Sinatra backend. Let's take a look at what our request would look like from our front end: 

```JavaScript
// ./App.js
const [demons, setDemons] = useState([])

 useEffect(() => {
    fetch("http://localhost:9292/demons")
    .then((r) => r.json())
    .then((data) => setDemons(data));
  },[])
```
Here we are using our localhost url for our fetch so that we can _get_ our demons data from our backend. This is important because this is how we connect our frontend to our backend. 

## Backend GET 
To get your GET request working you need both you frontend fetch request and your backend request so that they can work together to pass the data from one to another. So our backend GET request would look like this: 

```Ruby
class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'

  get "/demons" do
      demons = Demon.all
      demons.to_json
  end

end
```
This is telling us that when using the route "/demons" get all the demon data in our database and return it to json format. If you go to your localhost route, you can see the data that the request is retrieving. Here is a sample of what our demon data will look like: 
![without include](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k288y7p35nywsmtezeyz.png)Perfect! Now you might be asking yourself, do we get the same data from our frontend? Lets find out, we can use `console.log()` to view the data being sent to our frontend in our fetch request. The data in our console will look something like this:
![console result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm97nrk2x9gzggr5eyec.png)
Now we have successfully connected our frontend and backend. Congratulations you just learned how to use GET requests to retrieve data from our backend and use it in our frontend! 
## `include:`
All of our demons guard souls in the underworld, meaning we have a _one to many_ relationship where a demon _has many_ souls and a soul _belongs to_ a demon. So what if you wanted to not only fetch the demons but also its associated souls? we could do something like this: 
```Ruby
  get "/demons" do
      demons = Demon.all
      demons.to_json(include: :souls)
  end
```
The `include:` allows use to have access to the souls that are related to the demons. So now with this small change our database will look something like this:
![with include](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gd9u9of07205q5qqt5b.png) This now gives us every soul associated with that particular demon with the use of a foreign key (in this case that would be the demon_id). The foreign key is what allows us to connect the demons to the souls and therefor allows us to _include_ this relationship in our database. 
Now we can have access to this souls data from our frontend! An idea for what we could do in the frontend now is something like listing the souls for each demon to display them on our website! :ghost:
##Conclusion
I hoped this blog helped you understand GET requests and all the ways you can connect your backend data to your frontend! I also hope that you can utilize `include:` in your future projects. Happy coding!

Resources:
[1]  D. Landup, “Get HTTP request in react,” Stack Abuse, 28-Sep-2022. [Online]. Available: https://stackabuse.com/get-http-request-in-react/. [Accessed: 27-Oct-2022].