将查询参数传递给Netlify函数内的Snipcart API url

Question

我试图通过查询我的Netlify函数从Snipcart获取JSON产品数据，如下所示：

const fetch = require("isomorphic-fetch");
const {SNIPCART_PRIVATE_KEY} = process.env;

const API_ENDPOINT = "https://app.snipcart.com/api/products";
const {snipcartID} = event.queryStringParameters;

const callAPI = async (event, context) => {
  const auth =
    'Basic ' +
    Buffer.from(SNIPCART_PRIVATE_KEY + ':' + '').toString('base64');
  const t = await fetch(API_ENDPOINT + "?userDefinedId=" + ${snipcartID || 'ABC'}, {
    headers: {
      Authorization: auth,
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .then(data => {
      var results;
      if (data) {
        const {items} = data;
        if (items) {
            return {
              name: items[0].name,
              sales: items[0].statistics.numberOfSales,
            };
        }
      }
      return results;
    })
    .catch((error) => ({ statusCode: 422, body: String(error) }));

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers':
        'Origin, X-Requested-With, Content-Type, Accept',
    },
    body: JSON.stringify(t),
  };
};

exports.handler = callAPI;

当我在上面的函数中硬编码SNIPCART_ID时，我得到了正确的JSON数据。但我不能使用页面的JavaScript将Snipcart id作为参数传递，如下所示：

<script>
  document.addEventListener("click", function (event) {
    if (!event.target.matches("#collapsible")) return;
    let URL = "/.netlify/functions/snipcart-getsales";
    fetch(URL, "ABC")
      .then((response) => response.json())
      .then((data) => renderSales(data))
      .catch(() => renderError());
  });

  function renderSales(data) {
    const name = document.getElementById("name");
    const sales = document.getElementById("sales");
    const error = document.getElementById("error");

    error.innerHTML = "";
    name.innerHTML = data.name;
    sales.innerHTML = data.sales;
  }

  function renderError() {
    const error = document.getElementById("error");
    error.innerHTML = "Whoops, something went wrong. Please try again later!";
  }
</script>

我在这里做错了什么？

Answer 1

你能在发送request之前console.log(event)，检查你的函数是否得到了发送到request的正确的SNIPCART_ID。

Answer 2

经过一番折腾之后，我弄明白了:)

const fetch = require("isomorphic-fetch");
const {SNIPCART_PRIVATE_KEY} = process.env;

const API_ENDPOINT = "https://app.snipcart.com/api/products";

const callAPI = async (event, context) => {
  const auth =
    'Basic ' +
    Buffer.from(SNIPCART_PRIVATE_KEY + ':' + '').toString('base64');
  const querystring = event.queryStringParameters;
  const userDefinedId = querystring.userDefinedId || 'ABC';
  const t = await fetch(API_ENDPOINT + "?userDefinedId=" + userDefinedId, {
    headers: {
      Authorization: auth,
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .then(data => {
      var results;
      if (data) {
        const {items} = data;
        if (items) {
            return {
              name: items[0].name,
              sales: items[0].statistics.numberOfSales,
            };
        }
      }
      return results;
    })
    .catch((error) => ({ statusCode: 422, body: String(error) }));

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers':
        'Origin, X-Requested-With, Content-Type, Accept',
    },
    body: JSON.stringify(t),
  };
};

exports.handler = callAPI;