How to make a fetch call to the back-end. (Ruby on Rails, React)

Let me tell you why are here. You just don’t want to be skilled on the Front-end or Back-end but want to make a fully functioning application for your users to use and if some new bug arises you can swoop in like Superman and fix your problem. Now when you have something in your back-end that you want to send to the front end. You’ll want to make sure that it shows up on the front end. How does it work though?

During my time at Flatiron, I found the rhythm of going through the phases and being able to learn how to make fetches in general. Now, most of the data that we were fetching was stored in a JSON file in the VSCODE itself. Meaning that both the front end and back end are in the same place. Another thing to add is that the data was “hardcoded”. For those who don’t exactly know what that means, everything in the JSON file was written out by hand. So a FETCH to GET the data was written something like this:

fetch("http://localhost:9292/plants")
.then((r) => r.json())
.then((data) => console.log(data))
}

We can see that when we start out our fetch from the top it React is going to require us to be able to specify what we’re exactly doing. The next part in the parenthesis is a URL.

This URL has plant data and the format of that data is JSON. Now we have to make sure that this is always the same. The URL must be in quotes and in parentheses!

Once we embed a URL we are making a request to have a response to this in JSON. We are telling it essential that we need a promise that we’ll get a response back. The last step is where the magic comes in. If we did it correctly we just fetched our data! We are then able to do whatever we want with the data. For now, however, I just want to console log the plants.

I just explained how to make a fetch to a JSON file but that’s not why you’re here. You want to know how to make a fetch to the backend when you’re running Rails! Well, what if I told you that this isn’t that much different? Let’s dive in.

For example, let’s say we’re trying to create an app that has a bunch of exercises. We are trying to show all of them but for now, we just want to log them into the console. We are assuming that you have experience with Rails and that this is more like a checklist to go back to check for so that there is no method of error when making your fetch in the front-end. This is especially important since we have graduated from fetching from a JSON file to actually communicating to a server in order to get your data.

1. Make sure you have the seed data set up correctly

Exercise.create(activity: "Tai Chi", muscle_group: "Cardio", image:"https://media3.giphy.com/media/v22JfwLFi6nNS/giphy.gif?cid=ecf05e472ywbmgqudip6l9k34rzyjr5tf35nbqy68mfs8uoc&rid=giphy.gif&ct=g")
Exercise.create(activity: "Bench Press", muscle_group: "Upper Pectoral", image:"https://c.tenor.com/rYk8LxogeKQAAAAC/pumping-iron-arnold-schwarzenegger.gif")
Exercise.create(activity: "Squats", muscle_group: "Thigh", image:"https://c.tenor.com/S_DL1I17n1sAAAAC/pumping-iron-arnold-schwarzenegger.gif")

2. Make sure you have your controllers working

class ExercisesController < ApplicationController
skip_before_action :authorize, only: :index

def index
all_exercises = Exercise.all
render json: all_exercises
end

3. As well as your serializers

class ExerciseSerializer < ActiveModel::Serializer
attributes :id, :activity, :muscle_group, :image
end

4. Make sure your routes are set up

Rails.application.routes.draw do
resources :exercises
end 

You can check your routes by running:

$ rails routes 

5. Write your fetch!

fetch("http://localhost:4000/exercises")
.then((r) => r.json())
.then((data) => console.log(data))
}

SUCCESS!!! If you were able to set it to log it into the console you should be seeing your data pop up! Just make sure that you have tested the URL on insomnia or postman beforehand.

If you checked everything correctly then connecting the front end to the back end is not as hard as you think! Essentially the only thing that changes here is that you just have to make sure that you set up the Rails backend and test using Insomnia or Postman. Get to coding!