DEV Community

loading...

#Fetching Yelp API via Netlify Function with React.js [pt. 4]

Marcin Oleksiak
self-taught coding newbie, interested in frontend webdev
Updated on ・7 min read

Previous part covering steps 10-14 is right here.

In this part I will:

  • install netlify-cli package and from now on, I will run my app at port 8888
  • use cors-proxy redirection to solve “Cross-Origin Request Blocked” problem
  • return real data from Yelp API to the browser console (for the first time)
  • build Netlify serverless function and fetch Yelp API from it

15. Netlify CLI

When I was builing my demo for the first time, I was held back by the hosting issue. Where and how should I deploy my app? Surge seemed to be easy to use but the range of free options seemed quite narrow. Heroku, on the other hand, appear to be overcomplicated. I was afraid of complex configuration. So I decided to go with Netlify.

To begin, I installed netlify-cli package with this command:

npm i -g netlify-cli

-g option installs package “globally”, meaning instead of setting it up as a project dependency (inside my app ~/node_modules directory), is placing it inside operating system (~/usr/local/bin/ directory) and making it available for all future projects.

Netlify CLI gives me bunch of tools to develop my project further: user's guide is available here, command reference is right here.

16. CORS Proxy

I was unable to solve “Cross-Origin Request Blocked” problem for weeks, have tried many different solutions, such as adding a proxy field to package.json file, using proxy middleware, etc. Either all those “cors-anywhere” tricks I found on internet were useless or I was too stupid to properly use them. Lucky for me, I stumbled upon this: Setup a CORS Proxy with Netlify by Jim Nielsen.

16.1 redirect rules

So I created netlify.toml configuration file with touch netlify.toml command and placed this code in it:

~/netlify.toml
Alt Text

Example of netlify.toml file is presented in official Netlify docs.

16.2 using cors-proxy in fetch method

With configuration ready to go I can tweak Fetched component a little:

~/src/comps/Fetched.jsx
Alt Text

16.3 running Netlify local dev server

From now on, instead of yarn start command I will use netlify dev command.

  • browser is running at http://localhost:8888/
  • I enter some search criteria, e.g. pizza/Berlin and submit them.

This time, contrary to step 14.3 in part 3, I'm successfully returning something to the browser console:

DevTools > Console
Alt Text

17. Fetching Yelp API (second attempt)

Since I got rid of “CORS header missing” error, I can concentrate on making fetched data useful. In order to do it, I need to parse Yelp API's response with json method. So, step by step, I do this:

17.1 parsing response with json method

  • I need to change/add this code to Fetched component:

~/src/comps/Fetched.jsx
Alt Text

After entering and submitting search criteria again, I'm returning this:

DevTools > Console
Alt Text

  • This is businesses array with 20 objects in it. I wanna check the first one:

~/src/comps/Fetched.jsx
Alt Text

After entering and submitting search criteria one more time, I'm returning this:

DevTools > Console
Alt Text

This is awesome: I successfully fetched real data, directly from Yelp API, and then properly returned it in browser console.

18. Serverless Function

My next quest is to hide API Key from DevTools > Network > Headers tab. To achieve this I have to take a few steps. Since dealing with CORS problem, my guess was that at some point I would have to move fetching to the backend. I was trying to build my own server with Express.js, and I even managed to fetch data and return it to Terminal, but I couldn't render them later in HTML. I mean I did, but app behaved unpredictably. Entire idea overwhelmed me. At that time I was reading something about serverless functions and somehow figured out, that it might be my backend. My “aha!” moment was How To Hide API Keys Using Netlify tutorial (published 2021-01-10, recording duration 56:54) by Dan Fletcher. Later I did Create your first Netlify Serverless Function! (2021-03-02, 13:43) by Ania Kubów and finally Build Netlify Serverless Functions with JavaScript (2021-03-02, 28:39) by Dave Gray. Thanks to these tutorials I figured out which portion of the code should stay in Fetched component and which I need to move to my serverless function.

I decided to build it on my own, intuitively, by making mistakes and fixing them as I go. So for starters I created new directory with mkdir fxs command and updated netlify.toml file with this code:

~/netlify.toml
Alt Text

Inside fxs directory I created three new files: package.json with default settings, .gitignore to exclude node_modules directory from committing to git and yelp.js to build my serverless function. I did it with this chain of commands:

cd fxs && npm init -y && touch .gitignore yelp.js && cd ..

~/fxs/.gitignore
Alt Text

To check my current files/folders structure, I did this:

tree -a -I 'node_modules|.git'

Terminal
Alt Text


For this and a few next steps, watching and coding along with Serverless Functions and Environment (published 2020-06-29, recording duration 35:21) walkthrough by Steve Griffith was crucial.

Before I split the code between Fetched component and yelp serverless function, I need to define redirection between them.

~/netlify.toml
Alt Text

I need to slim down Fetched component. I commented out everything I don't need here any more.

~/src/comps/Fetched.jsx
Alt Text

18.1 parsing query string (again) with URL module (Node API)

In step 14.1 (pt. 3) I used query-string package to pull out searching criteria from query string. Right now I need to redo this process at backend, so I will use the URL module from Node.js API.

To embrace how to even begin, an extremely short tutorial by Flavio Copes gave me a clue what to do: How to access query parameters in Netlify functions (published 2020-05-24).


In the next three steps below, I will observe Terminal and I won't care about browser console. Netlify local dev server must be restarted for this: Ctrl + C to shut down, netlify dev to launch again. Browser is running at http://localhost:8888/, each of those steps begins with entering some search criteria, e.g. pizza/Berlin and submitting them. Let's go:

  1. url variable is initialized:

~/fxs/yelp.js
Alt Text

Terminal
Alt Text

  1. In order to parse url string, I will use URL class from Node.js API:

~/fxs/yelp.js
Alt Text

Terminal
Alt Text

  1. When I look at qs object returned to Terminal, I know what to do. I will use the pathname and searchParams properties from Node.js API:

~/fxs/yelp.js
Alt Text

Terminal
Alt Text

Right now I have everything I need to complete my yelp.js serverless function.

18.2 installing node-fetch package and fetch Yelp API from Netlify Function

To send GET request from yelp function (which is my backend) I cannot use client-side fetch method from Fetch API any more. I need to replace it with node-fetch package:

cd fxs && npm i node-fetch && cd ..

~/fxs/yelp.js
Alt Text

I got to the point where I can test the yelp function in action, so:

  • browser is running at http://localhost:8888/
  • I enter some search criteria, e.g. pizza/Berlin and submit them.

Terminal
Alt Text

DevTools > Console
Alt Text

Excellent, this is exactly the same response like in step 17.1, perfect!

18.3 Code on GitHub, what's next?

Complete repo from this blog entry is uploaded on my GitHub.

Next part covering steps 19-20 is right here.

Thanks for reading and stay tuned!

Discussion (0)

Forem Open with the Forem app