How to insert params into netlify functions?

Question

I have an input that sends an api call on submit to the unsplash API. I am trying to convert this into a netlify function but am not sure how to pass the params from the input into the function. I am trying to keep the API key hidden. I've never worked with the qs package and looked up the docs but have not been able to quite figure it out.

script.js

const KEY = "" //secret
const URL = `https://api.unsplash.com/search/photos?page=1&per_page=50&client_id=${process.env.KEY}`;
const input = document.querySelector(".input");
const form = document.querySelector(".search-form");
const background = document.querySelector(".background");
const overlay = document.querySelector(".overlay");
const header = document.querySelector(".title");
let results = [];

search = (searchTerm) => {
  let url = `${URL}&query=${searchTerm}`;//this should hit the netlify endpoint instead
  return fetch(url)
    .then((response) => response.json())
    .then((result) => {
      toggleStyles();
      header.appendChild(form);
      result.results.forEach((image) => {
        const galleryItem = document.createElement("div");
        galleryItem.className = "gallery-item";
        const imageDiv = document.createElement("div");
        imageDiv.className = "image-div";
        document.querySelector(".results-page").appendChild(galleryItem);
        galleryItem.appendChild(imageDiv);
        imageDiv.innerHTML =
          "<img class='image' src=" + image.urls.regular + ">";
        form.classList.remove("toggle-show");
        input.classList.add("header-expanded");
        form.addEventListener("submit", (e) => {
          e.preventDefault();
          document.querySelector(".results-page").remove();
        });
      });

      console.log(result.results);
      return results;
    });
};

toggleStyles = () => {
  const resultsContainer = document.createElement("div");
  resultsContainer.className = "results-page";
  document.body.appendChild(resultsContainer);
};

input.addEventListener("focus", (e) => {
  e.preventDefault();
  input.style = "font-family: 'Raleway', sans-serif";
  input.placeholder = "";
});

input.addEventListener("blur", (e) => {
  e.preventDefault();
  input.style = "font-family: FontAwesome";
  input.value = "";
  input.placeholder = "\uf002";
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  let searchTerm = input.value;
  search(searchTerm);
});

token-hider.js

const axios = require("axios");
const qs = require("qs");

exports.handler = async function (event, context) {
  // apply our function to the queryStringParameters and assign it to a variable
  const API_PARAMS = qs.stringify(event.queryStringParameters);
  console.log("API_PARAMS", API_PARAMS);
  // Get env var values defined in our Netlify site UI

  // TODO: customize your URL and API keys set in the Netlify Dashboard
  // this is secret too, your frontend won't see this
  const { KEY } = process.env;
  const URL = `https://api.unsplash.com/search/photos?page=1&per_page=50&client_id=${KEY}`;

  console.log("Constructed URL is ...", URL);

  try {
    const { data } = await axios.get(URL);
    // refer to axios docs for other methods if you need them
    // for example if you want to POST data:
    //    axios.post('/user', { firstName: 'Fred' })
    return {
      statusCode: 200,
      body: JSON.stringify(data),
    };
  } catch (error) {
    const { status, statusText, headers, data } = error.response;
    return {
      statusCode: error.response.status,
      body: JSON.stringify({ status, statusText, headers, data }),
    };
  }
};

I added the KEY as an Environment variable in my netlify UI, and am able to hit the function's endpoint. Any help is greatly appreciated as I am new to serverless functions but want to learn JAMstack really badly.

Answer 1

I think you are asking two different things here - how to use secret keys in Netlify functions and how to pass parameters to it from your front end code.

1. You can define environment variables in your Netlify site settings. These variables can then be used in your Netlify functions via process.env. So if you called your variable SECRET_KEY, then your Netlify function code (not your front end code!) would be able to read it via process.env.SECRET_KEY.

Looking over your code, it looks like you understand that as you have it in your function, but you also try to use it in the client-side code. You can remove that.

2. Your code gets the query string parameters, and it looks like you just need to add them to the end of the URL you hit. Did you try that?