My custom Netlify serverless function won't fetch data from Prismic API

Question

I'm trying to write a serverless function for Netlify that will essentially be fetch JSON from a Prismic API - the headless CMS I'm using.

The reason I'm doing this to eventually provide a Snipcart, a shopping cart, with a 'product URL' that it can use to crawl JSON and validate a transaction. Info here: https://docs.snipcart.com/v2/configuration/json-crawler

const Prismic = require("@prismicio/client");

exports.handler = async function () {
  Prismic.client("https://my-repository.cdn.prismic.io/api/v2", { req: req })
    .then(function (api) {
      return api.query(Prismic.Predicates.at("document.type", "product"));
    })
    .then(function (response) {
        console.log(response)
      const data = await response.json();

      return {
        statusCode: 200,
        headers : { 
            'Content-Type': 'application/json',
            'Accept': 'application/json'
           },
        body: JSON.stringify(data),
      };
    });
};

With the code above I get two error messages from the console:

GET http://localhost:8888/.netlify/functions/prismic 500 (Internal Server Error)

Uncaught (in promise) SyntaxError: Unexpected token S in JSON at position 0

...I'm very much new to this world and would really appreciate any help!

I'm following the Prismic querying docs here: https://prismic.io/docs/technologies/how-to-query-the-api-javascript do you think they look like they should work?...For now I've removed the json helper functions to test if I get any response from the API. And nothing, just a TypeError 'Prismic.client(...).then is not a function' — Jack, Aug 31 '21 at 14:42

Jack · Answer 1 · 2021-09-01T08:53:11.737

ok after some struggle and a lot of head scratching I got it to work.

It was all there in the Prismic documentation, but took a lot of troubleshooting https://prismic.io/docs/technologies/how-to-query-the-api-javascript

Hope this helps another beginner out:

const Prismic = require("@prismicio/client"); 

exports.handler = async function () {
    const client = Prismic.client("http://my-repository.cdn.prismic.io/api");
  return client
    .query(Prismic.Predicates.at("document.type", "product"))
    .then(function (response) {

      let data = response.results;

      let newItems = Object.values(data).map((item) => {
        return {
            name: item.data.product.name.value[0].text,
            id: item.uid,
            price: item.data.product.price.value,
            url: 'https://my-site.netlify.app/.netlify/functions/prismic',
        };
      });

      return {
        statusCode: 200,
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(newItems),
      };
    });
};

Please add further details to expand on your answer, such as working code or documentation citations. — Community, Aug 31 '21 at 21:32

My custom Netlify serverless function won't fetch data from Prismic API

1 Answers1