Relations

Relations allow us to have one model be related another model.

Before you start

We will be altering how the Favorite model works with our backend in this gitbook notebook.

Originally we made the Favorite model without attaching it to an user of the angular application aka the AppUser model. We also added an entry to the favorites collection in our database to see if we could store something on your database.

We will need to delete any Favorite entries in our database before we implement the below steps of making the Favorite model be related to the AppUserModel.

We need to do this because we are altering the way these two models will work together, otherwise you'd have some inconsistent data in your database. Some Favorite model entries will be related to AppUser and some will not.

Summary/Overview

Relations allow us to have one model be related another model.

For example:

The illustration above represents a Customer model having potentially many Order model entries, this illustrates the "relation".

Example reference

Another Example:

An AppUser can have many Favorites . This will allow us to retrieve information related to a user, more specifically what Favorite model entries a particular AppUser has stored in the database

AppUser Model Entry

appUser = {
  id: "3afsdjk212gl3af"
  firstName: "Jane",
  lastName: "Doe",
  email: "[e-mail]"
}

In the above example the id from the AppUser model entry (line 2) is inserted as a “foreign key” on the Favorite model entry (line 3) on the Favorite Model Entry Tab.

Favorite Model Entry

favorite = {
    id: "5dfac7c7f809983c88298247"
    userId: "3afsdjk212gl3af"
    movieTitle: "Star Wars",
    thirdPartyMovieId: 11,
    posterPath: "/btTdmkgIvOi0FFip1sPuZI2oQG6.jpg" 
}

Line 3: Favorite entry's userId value "3afsdjk212gl3af" is from the appUser entry

In loopback each instance will have a unique id generated for it automatically on created unless otherwise specified.

Relation Setup

Step 1

In your terminal type: lb relation

Step 2

Now Select appUser as the model we are starting this relation from.

Step 3

Now we will select the type of relation. In our case an appUser can have many favorites. So we select hasMany

Step 4

Now we have the choice of the other model we want to have the relation with. In this case favorite is model that an appUser can have many of.

Step 5

Now we need a property name for the relation, favorites. This is property that will show up in our model that is the owner for example. In this case our appUser has many favorites.

The name in the parentheses( ) below is the default name of the relation unless you type in another name.

Press Enter

Step 6

Now we enter a foreign key this will be the field added to the favorite model. In the example below userId is the foreign key that refers to the id of the appUser who it is related to.

favorite = { id: "5dfac7c7f809983c88298247" userId: "3afsdjk212gl3af" movieTitle: "Star Wars", thirdPartyMovieId: 11, posterPath: "/btTdmkgIvOi0FFip1sPuZI2oQG6.jpg" }

UserIdabove will be the foreign key.

Step 7 Require a through model would be the case of a lets say we have a doctor and a patient they would both own the appointment. The appointment would be the through model. We will be selecting no.

Relation Recap

We set up a “has many” relation from the appUser model to Favorites because an appUser can own many favorites . After creating this relation the appUser model will have a new property called favorites, and a foreign key or userId property will be added to the favorite model instance which will point to the unique id of the appUser.

Relations in Loopback Explorer

Now restart your backend to update the new changes and go to the explorer. Select the appUser endpoint

Then scroll down and you should have new routes that will have do to with the created relation. In our case favorites. Below are a list of pre-built routes that take advantage of the relation we created.

After you setup the token authentication and access control settings, you can use the token stored in our sessionStorage object to make a http call in angular to submit a new Favorite model entry for a particular appUser to the database.

main.component.ts

AddToFavorites(){
  let token = sessionStorage.getItem("token")
  let favoritesUrl = "http://localhost:3000/api/appUsers/${sessionStorage.getItem("userId")}/favorites/?access_token=${token}`"

   this._http.get( favoritesUrl )
   .subscribe(
     res => console.log("res", res)
   )
 }