Sinatra with Active Record: GET requests using "include:"

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!

Hades gives spooky vibes right?

Frontend GET request

First, lets quickly review what a GET request is.

GET is an HTTP request method that is used to obtain resources from servers [1].

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:

// ./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:

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:
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:

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:

  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:
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! 👻

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].