Support for NextJs App Directory

[mharis]

I am having a hard time integrating with the app directory.

If anyone can show an example of the implementation, it'd be great.

[Skn0tt]

Hi @mharis! The quirrel/next adapter is built to be used with API Routes. This feature is only available in the /pages directory. I believe you should be able to continue using that.

If, for whatever reason, you don't want to use API Routes, the /app-directory equivalent seems to be Route Handlers. I haven't tested it, but here's a rough sketch of how an integration for Queue could look:

// app/api/my-queue.ts

import { QuirrelClient } from "quirrel/client"

export const myQueue = new QuirrelClient({
  route: "/api/my-queue",
  async handler(payload) {
    // ... your queue logic ...
    console.log(payload)
  }
})

export async function POST(request: Request) {
  const { body, headers, status } = await quirrel.respondTo(
     await request.text(),
     Object.fromEntries([...request.headers.entries()])
   );

   return new Response(body, { headers, status });
}

// then later in a different, server-side execution:
import { myQueue } from "app/api/my-queue"

await myQueue.enqueue(...)

Again, I haven't tested this - it's mostly an adaptation of https://github.com/quirrel-dev/quirrel/blob/main/src/sveltekit.ts. If you end up implementing this in your project, I'd be happy to review a PR that adds this like a quirrel/next-app helper + docs on it!

[gyto23]

@Skn0tt Great example. The other question I have. How to make await myQueue.enqueue({}, { repeat: { cron: ... } } ) run once, regular pages/ directory was pick up automatically by quirrel and it would register the cron job, however, this time I need manually call que to run cron job from app/ directory

PS: Code above is working perfectly on regular jobs 🤌

[Skn0tt]

CronJobs will be a bit tricker to make work. The Quirrel CLI detects them by parsing your code, so your user-land cronjob needs to match the shape that cron-detector.ts is scanning for. I've added a test in https://github.com/quirrel-dev/quirrel/pull/1137/files that shows an example of how you can do it:

import * as QuirrelNext from "quirrel/next"

function CronJob(route: string, schedule: string, handler: () => Promise<void>) {
  const client = new QuirrelClient({
    route,
    handler,
  })

  return async function POST(request: Request) {
    const { body, headers, status } = await client.respondTo(
      await request.text(),
      Object.fromEntries([...request.headers.entries()])
    );
  
    return new Response(body, { headers, status });
  }
}

export const POST = CronJob("/api/test", "0 15 * * *", async () => { /* ... */ })

The important bit is that the helper function CronJob has exactly this name, and has the same first two parameters. Addiotionally, it's crucial that you import something from quirrel/next, even if you don't use it.

I've captured the need for a ready-built Next.js integration in #1138. Once that's shipped, i'll ping here again. In the meanwhile, the code above should be a fine workaround.

[gyto23]

@Skn0tt tacking my words back, queue doesnt work, it send a job to execute, but after that nothing is happening, like doesnt even go to handler for some reason. However, cron job works as expected, I will be waiting for PR #1138 then 👍

[KevinEdry]

A working example if anyone stumbles on this open discussion in the feature.
I might open a pr implementing this to the Queue object.

import { QuirrelClient } from "quirrel/client";
import { NextApiRequest } from "next";

export const companiesQueue = new QuirrelClient({
  route: "/api/queues/companies",
  handler: async (payload) => {
    console.log({ payload });
  },
});

async function streamToString(
  stream: ReadableStream<Uint8Array>
): Promise<string> {
  const reader = stream.getReader();
  const decoder = new TextDecoder("utf-8");

  const readChunk = async (chunks: string[] = []): Promise<string[]> => {
    const result = await reader.read();
    if (result.done) {
      return chunks;
    }
    chunks.push(decoder.decode(result.value));
    return readChunk(chunks);
  };

  const chunks = await readChunk();
  return chunks.join("");
}


export async function POST(req: NextApiRequest) {
  const payload = await streamToString(req.body);

  const { body, headers, status } = await companiesQueue.respondTo(
    payload,
    req.headers
  );
  return new Response(body, { headers, status });

}