How to execute external API calls with React + Express

1

Hi everyone,

I’m still fairly new to full stack development and I’ve been stuck for days. I could really use some help from anyone who is familiar with React + Express + External API projects. Right now I still have my frontend and backend working independently of each other, but I’m at the stage where I need to start wiring up the frontend to the backend.

I have a file (PhotosAPI.js) with the following code on the React side:

const API = 'https://api.unsplash.com/';

export const getCurated = () =>
  fetch(`${API}photos/curated/?order_by=popular&client_id=${API_KEY}`).then(
    res => res.json()
  );

export const search = query =>
  fetch(`${API}search/photos?query=${query}&client_id=${API_KEY}`)
    .then(res => res.json())
    .then(data => data.results);

Then in App.js I make the fetch request in componentDidMount() and set the state like so:

componentDidMount() {
    PhotosAPI.getCurated()
      .then(photos => {
        this.setState({
          photos,
          loading: false
        });
      })
      .catch(error => this.setState({ error, loading: false }));
  }

My question is–now that I’m trying to integrate the backend–how should the fetch request be handled? Do I need to move PhotosAPI.js to the backend? If yes, then how do I pass the response back to componentDidMount() in the frontend so that it sets the state properly?

Any guidance on how to properly set this process up is greatly appreciated!

2

All the code you have shown so far is meant for the frontend and, as far as I can tell, is functional—it will fetch (presumably) photo data from Unsplash and store them into component’s state. Are you using a backend that you coded yourself and that the Unsplash API is just an example?

I might be missing something—if it’s all your own code, could you please provide some context as to what you are trying to do? Or perhaps provide the more relevant part of your code (backend)?

3

Because you are using an API key, you are going to want to hide it on the back end. You are not going to call upsplash from the client. You are going to create your own express server with your own endpoint, like http://www.myserver.com/api/photos (or deploy it on heroku, or whatever) with a GET request, passing the relevant data and then the server can make the call to upsplash. You can hide the API key in a .env file. I did this exact thing in my timezones app. I didn’t want to expose my Google API key so I did exactly what I just said. It’s a trivial server, only serving up a few API endpoints, but it works great. When you get it to production, you can control what client urls can access your server.

1 Like
4

Hi @honmanyau, what I was saying is I’m not exactly sure how I should go about taking the code I have in PhotosAPI.js and moving it to the backend. I created a backend because I want users to be able to login, create a profile, and save photos to collections on the site I’m working on. I’m using Unsplash as a way for users to see featured photos and/or search for photos and save them.

I’m just not sure of the best way to switch the fetch request to the server side, and how I would then pass the response back to the client side. This is probably a really broad question, so I apologize, but if you know of any good examples/resources about this, that would be great.

5

Thanks for the response @kevinSmith! I’ve been looking at your repo and it’s been very helpful.