Building An End-to-end Application with LoopBack & React.js — Part 2: Creating Service Proxy

Diana Lau
ITNEXT
Published in
4 min readJun 22, 2021

--

In my previous blog, I went through what the application can do, and also created the DataSource that connects to the GitHub REST API. In this article, I’m going to create the skeleton of the rest of the LoopBack application:

  • create the service proxy that calls the functions we’ve defined in the datasource
  • expose REST APIs for the LoopBack application by creating a controller

Going back to our diagram, it shows what we’ve done in part 1 and what we’re going to do in part 2.

If you want to see how the completed LoopBack application looks like, you can go here.

Service Proxy

Service is a LoopBack concept that refers to an object with methods to perform local or remote operations.

To create a service proxy, run the lb4 service command:

$ lb4 service
? Service type: Remote service proxy backed by a data source
? Please select the datasource GithubdsDatasource
? Service name: GHQueryService
create src/services/gh-query-service.service.ts
update src/services/index.ts
Service GhQueryService was/were created in src/services

As a next step, we are going to map the functions defined in the GitHubDataSource to the methods in the newly created GhQueryService.

In services/gh-query-service.service.ts , update the GhQueryService interface and add 3 more interfaces.

Now, the service proxy is done! Let’s move to the Controller.

Controller

Controller is another LoopBack concept that exposes REST APIs. You can create the controller by using the lb4 controller command. You’ll be asked whether you want to create an empty Controller or REST Controller with CRUD functions. If you create the controller to connect to a repository, it might be good to choose the CRUD options to save you some typing. However, in our case, we only need an empty Controller.

$ lb4 controller
? Controller class name: GHQuery
Controller GhQuery will be created in src/controllers/gh-query.controller.ts
? What kind of controller would you like to generate? Empty Controller
create src/controllers/gh-query.controller.ts
update src/controllers/index.ts
Controller GhQuery was/were created in src/controllers

Note: The LoopBack Controller CLI appends the string “Controller” to the controller class name you specified in the prompt.

In this Controller, we are going to:

  • inject the GhQueryService service proxy that we just created
  • add a function that expose as /issues/repo/{repo}/label/{label} .

The @get decorator means it is a GET method. For more details, see the OpenAPI decorator docs. Another trick is to look at the TodoController from the ToDo tutorial.

Creating Personal Access Token

Remember when we were creating the DataSource, we specify to use an environment variable TOKEN for the Authorization header? We now need to generate this token if you don’t have it already. This will be the last step before we can test it out.

To generate the personal access token,

  • After you log into GitHub, go to Settings > Developer Settings or simply https://github.com/settings/apps
  • Click Personal Access Token on the left
  • Click Generate new token.
  • Check the “repo” and “user” checkbox. This would be enough for the purpose of this application
  • After it generates, make sure you store it somewhere safe because you won’t be able to see the token value again. If you lost it, you need to revoke it.

In the terminal that you use to start the application, set the TOKEN environment variable. Run the command below:

export TOKEN='token <your_personal_access_token>'

Testing it out

We’re ready to go! In the same terminal, start the application:

npm start

After you see Server is running at http://[::1]:3000 , go to http://localhost:3000/explorer.

You can put in whatever you want to test. For me, I have this:

Running the /issues/repo/{repo}/label/{label} endpoint

You should see something like below as the response:

Sample result

What’s next?

You probably realize something is missing. The number of items returning is always less than 30, even the total_count indicates a greater number. It is because by default GitHub APIs only return 30 items at a time. We can increase each page to have maximum 100 results, but after that, we still need to traverse the pages to get all the results. I’m going to show how to do that in the next article. Stay tuned!

--

--