Posts tagged #serverless

📝 ✨ ~ Failing to use NextAuth with a Xata Worker for Prune your Follows

Fri, 20 Jan 2023 00:00:00 GMT

I naively thought all we needed for NextAuth to work with a Xata Worker was getting access to the NEXTAUTH_SECRET env variable.

But alas, when moving to a Xata Worker, the cookie set by NextAuth is unavailable as the Worker is served from another domain. However, the getToken function can also get the token from the `Authorization: 'Bearer token'. But how do we make that happen 🤷‍♀️

We'll figure it out over the next few weeks! I am sure 💪

If you have any experience with Cloudflare Workers (Xata Workers are an abstraction on top of Cloudflare Workers) and NextAuth, please reach out 🙏

All the best,
Queen Raae

Queen Raae and family worked on several projects for Xata.

📝 ✨ ~ Exploring Xata (Cloudflare) Workers for Prune your Follows

Fri, 13 Jan 2023 00:00:00 GMT

As soon as Prune your Follows facilitates 500 unfollows in 24 hours, it gets blocked by Twitter for 24 hours.

To combat this, we think that some type of queuing architecture is needed. Feel free to reply if you have any input!

So we decided to explore Xata Workers on this week's unauthorized and rum-fueled treasure hunt as Xata Workers is built on top of Cloudflare Workers and Cloudflare also has Cloudflare Queues 🤔

To my surprise we did get a Worker working locally while on stream 🥳

However, we did not handle authenticating the user inside our Xata Worker. Needed to make sure the user has access and only gets relevant records.

Pirate Shai to the rescue; hopefully, time will tell...

The How

We initialized Xata Workers in our exiting Xata project xata workers init,
defined a Xata Worker, copy/past-ing the code from our Gatsby Function,
and then used the defined Worker directly in our useQuery replacing the GET request to /api/account

The Xata CLI will magically cut out the Xata Worker code and deploy it to Cloudflare for us, using xata upload 🤯

For local development, we used xata workers watch. Not completly sure what happens then 😬

import { useQuery } from "@tanstack/react-query";
import { useUser } from "../user";

import { xataWorker } from "./../../xata";

// Define Xata Worker 1️⃣
const searchAccount = xataWorker(
  "searchAccount",
  async ({ xata }, { search }) => {
    const searchResults = await xata.search.all(search, {
      tables: [
        {
          table: "accounts",
          target: [
            { column: "name", weight: 3 },
            { column: "username", weight: 7 },
            { column: "meta.location" },
            { column: "meta.description" },
          ],
        },
      ],
      highlight: { enabled: true },
      fuzziness: 1,
      prefix: "phrase",
    });

    const records = searchResults.map((result) => {
      return {
        ...result,
        searchInfo: result.record.getMetadata(),
      };
    });

    return { records };
  }
);

export default function useSearch({ search }) {
  const { data: user } = useUser();

  return useQuery(
    ["accounts", user?.id, "search", search],
    async () => {
      // Use the Xata Worker 2️⃣
      return searchAccount({ search: search });
    },
    {
      enabled: Boolean(user?.enableQueries) && Boolean(search),
      keepPreviousData: true,
    }
  );
}

As mentioned, this code is incomplete, as we need to filter the accounts by the authenticated user.

All the best,
Queen Raae

PS: Follow the Pull Request if you are very interested 🤪

Queen Raae and family worked on several projects for Xata.

🧪 📺 ~ How to TDD your Gatsby (Serverless) Functions with Jest

Tue, 14 Jun 2022 00:00:00 GMT

Interested in getting started with Test Driven Development?

Mirjam Diala (@mirjam_diala) show us how in last summers Testing your Gatsby Serverless Functions webinar.

We get into the TDD mentality and showcase how to specifically use Jest to test your Gatsby Serverless Functions.

The code can be found on on Github.

All the best,
Queen Raae

🏷 🪝 ~ How to trigger a Stripe (checkout.session.completed) Event with metadata

Fri, 03 Jun 2022 00:00:00 GMT

We had fun with the Stripe CLI in yesterday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands while refactoring the Stripe Webhook of our price-winning Gatsby FuncJam entry to use the raw body for Stripe verification.

The What?

Trigger Stripe Checkout Session with metadata

The Why?

Sometimes your Stripe Webhook expects there to be metadata attached to the Checkout Session. In our case, we want to grant access to a private Github repository and therefore add the Github username to the Checkout Session.

The How

You can add or override the data on resources when triggering events using the add flag.

The documentation lets us know:

--add [resource]:[path1].[path2]=[value]

To add metadata to a Stripe Checkout Session, resource should be swapped for "checkout_session path1 for "metadata" and path2 for your custom metadata key. In our case, "github":

--add checkout_session:metadata.github=olavea

Then we use the above when triggering events, such as "checkout.session.completed":

stripe trigger checkout.session.completed --add checkout_session:metadata.github=olavea

I had to upgrade my Stripe CLI to get this functionality, so I believe this is a new addition in the last year or so.

All the best,
Queen Raae

👩‍🏫 📺 ~ A practical introduction to Gatsby (Serverless) Functions

Thu, 02 Jun 2022 00:00:00 GMT

Ready to get going with Serverless Functions?

Check out the A practical introduction to Gatsby (Serverless) Functions webinar that kick-started last years Gatsby Summer Functions.

All the best,
Queen Raae

PS: On tonight's unauthorized and rum-fueled treasure hunt, we'll refactor the webhook from our price-winning Gatsby FuncJam entry to use the raw body for Stripe verification.

λ 🎉 ~ Raw body works in develop from v4.16

Wed, 01 Jun 2022 00:00:00 GMT

As mentioned in Stripe Event validation in a Gatsby Serverless Function, getting the raw body in a Gatsby Serverless Functions did not work in development.

Luckily the framework team at Gatsby agreed it was a bug and fixed it. It looks like it will ship with Gatsby v4.16.

I got it working today using 4.16.0-next.1.

yarn add gatsby@4.16.0-next.1

All the best,
Queen Raae

λ 💰 ~ Stripe Event validation in a Gatsby Serverless Function

Thu, 19 May 2022 00:00:00 GMT

If you are new to serverless, you might have thought nothing of yesterday's "Using Http Request Body" example.

export default function handler(req, res) {
  const { city, year } = req.body;
  res.send(`You time-travelled to ${city}, in year ${year}`);
}

But having the body served to you automagically as json, when it makes sense, is something I really like about Gatsby Functions. In most other serverless implementations, you have to parse it yourself.

However, when it comes to verifying the signature of a webhook using a third-party SDK, not so much! Most signature checks require access to the raw body.

And for the longest time, we could not access the raw body in a Gatsby Function, but with the release of Gatbsy v4.14, we can 🎉

To control the body-parser middleware export an object named config.

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const endpointSecret = process.env.STRIPE_ENDPOINT_SECRET;

// Export a config object
// to configure the bodyParser
export const config = {
  bodyParser: {
    raw: {
      type: `*/*`,
    },
  },
};

export default function handler(req, res) {
  try {
    const sig = req.headers["stripe-signature"];
    const event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);

    // Handle the verified event,
    // event data can be trusted
    switch (event.type) {
      case "checkout.session.completed":
        console.log("CheckoutSession completed, fulfill the order!");
        // Handle the event
        break;
      // ... handle other event types
      default:
        console.log(`Unhandled event type ${event.type}`);
    }

    res.status(200);
  } catch (err) {
    console.warn(err.message);
    res.status(400);
  }
}

Unfortunately, I cannot seem to make this work locally, but I have verified that it works on Gatsby Cloud. I will, of course, follow up with Gatsby to figure out what's up. Is it a feature? Or a bug? I know my opinion on the matter 😬

Update: Raw body works in develop from v4.16

All the best,
Queen Raae

3️⃣ λ ~ Dynamic data in your Gatsby Serverless Functions

Wed, 18 May 2022 00:00:00 GMT

How do you get data into a serverless function?

There are three common approaches:

1. Using URL Queries

Demo

/api/time-travel-query?city=oslo&year=1624

Documentation

Gatsby Documentation on Data formats (including URL Queries)
Wikipedia article on Query Strings

Serverless Function Code

// File: /api/time-travel-query
// Usage: /api/time-travel-query?city=oslo&year=1624
export default function handler(req, res) {
  const { city, year } = req.query;
  res.send(`You time-travelled to ${city}, in year ${year}`);
}

2. Using Param Routes

Demo

/api/time-travel-params/oslo/1624

Documentation

Gatsby Documentation on Dynamic routing (including Param Routes)

Serverless Function Code

// File: /api/time-travel-params/[city]/[year].js
// Usage: /api/time-travel-params/oslo/1624
export default function handler(req, res) {
  const { city, year } = req.params;
  res.send(`You time-travelled to ${city}, in year ${year}`);
}

3. Using Http Request Body

Demo

<form action="https://demodatafunctions.gatsbyjs.io/api/time-travel-body" method="post"> <p> <label htmlFor="year">Year: </label> <br/> <input required type="number" id="year" name="year" value="1624" /> </p> <p> <label htmlFor="city">City: </label> <br/> <input required type="text" id="city" name="city" value="Oslo" /> </p> <button>Travel</button> </form>

Documentation

Gatsby Documentation on Data formats (including body params)

Serverless Function Code

// File: /api/time-travel-body.js
// Usage: {city: "Oslo", year: "2026"} added to request body
export default function handler(req, res) {
  const { city, year } = req.body;
  res.send(`You time-travelled to ${city}, in year ${year}`);
}

Check out the full demo code on GitHub or take it for a spin using CodeSandbox.

All the best,
Queen Raae

PS: Yesterday was May 17th, a special day in Norway. Check out the reason and the fam in our finest on Twitter.