Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring Native support for Next.js App Directory #1138

Closed
Skn0tt opened this issue Jun 5, 2023 · 3 comments
Closed

Bring Native support for Next.js App Directory #1138

Skn0tt opened this issue Jun 5, 2023 · 3 comments

Comments

@Skn0tt
Copy link
Member

Skn0tt commented Jun 5, 2023

In #1136, users asked for how they can use the Next.js App Directory with Quirrel. We should build a ready-made integration.

@KevinEdry
Copy link
Contributor

Waiting for this to happen, I cannot integrate Quirrel to my nextjs 13 codebase.
would also love to see a workaround until this will be resolved.

Skn0tt added a commit that referenced this issue Jun 20, 2023
## Summary
This PR aims to revise and add two main things:
- Bring native support for Nextjs 13 app router to Quirrel -
#1138
- Improve the docs experience since the hosted version of Quirrel isn't
available anymore


## Nextjs 13 App Router
Because Nextjs 13 now expects a named method function as a route handler
(POST, GET etc..), we need to provide it as part of the `Queue` and
`CronJob` methods, we also want the queue instances themselves, so I've
made it so it would be accessible via object destructuring, that way we
can export both `POST` and the queue instance in one go, and alias the
queue instance with a meaningful name.

Queue Usage:
```typescript
  export const { POST, queue: sampleQueue } = Queue(
   "/api/queues/sample",
   (payload) => {
       ...logic goes here
  });
 
 await sampleQueue.enqueue({ jobData });
```

CronJob Usage:
```typescript
  export const { POST } = CronJob(
   "/api/queues/sample",
   "0 0 * * 1"
   (payload) => {
       ...logic goes here
  });
```
I've added some docs changes as well to explain the usage of the new
queue api.

**The object destructuring is the best way I could think of to keep the
named export function `POST` and still have a meaningful name for the
queue instance, if you can think of a better implementation for this
please let me know!**

## Changelog:

### code
- added new `next13.ts` file to support nextjs 13 app directory
natively.

### docs
- added to proper documentation for all of the Nextjs changes.
- added new "Development" category which explains how to run the Quirrel
instance in a docker compose, or as a standalone instance.
- added a new and improved "Deployment" category with several guides on
how to deploy quirrel (docker, railway, fly and vercel).
- removed the old "Deploy" page.

---------

Co-authored-by: Simon Knott <info@simonknott.de>
@gyto23
Copy link

gyto23 commented Jun 21, 2023

@Skn0tt @KevinEdry

I dont think the queue is even working. I have already tried to run the new next-app. the cron jobs are invoking and they can return some console logs on server, however queue doesnt, nor setting queue for 3 seconds to invoke or manual invoke

image
export const docQueue = Queue(
  "/api/queue/doc",
  async (content_id: string) => {
    console.log("payload", content_id);
    const document = await getDocument(content_id);
    const modifiedAt = await getModifiedTime(content_id);

    const article = await prisma.article.update({
      data: {
        content: document,
        content_at: modifiedAt,
      },
      where: {
        content_id,
      }
    });

    revalidatePath(`/article/${article.id}`);
  }
)
export const POST = docQueue;

and I called it with (obvious)

 await docQueue.enqueue(
    id,
    {
      // runAt: today.add(3, "second").toDate(),
      runAt: today.add(10 + index, "minute").toDate(),
      id,
    },

@gyto23
Copy link

gyto23 commented Jun 23, 2023

@Skn0tt @KevinEdry

I dont think the queue is even working. I have already tried to run the new next-app. the cron jobs are invoking and they can return some console logs on server, however queue doesnt, nor setting queue for 3 seconds to invoke or manual invoke

image ```js export const docQueue = Queue( "/api/queue/doc", async (content_id: string) => { console.log("payload", content_id); const document = await getDocument(content_id); const modifiedAt = await getModifiedTime(content_id);
const article = await prisma.article.update({
  data: {
    content: document,
    content_at: modifiedAt,
  },
  where: {
    content_id,
  }
});

revalidatePath(`/article/${article.id}`);

}
)
export const POST = docQueue;


and I called it with (obvious)

```js
 await docQueue.enqueue(
    id,
    {
      // runAt: today.add(3, "second").toDate(),
      runAt: today.add(10 + index, "minute").toDate(),
      id,
    },

My mistake, Incorrect Base url in env was setup

@Skn0tt Skn0tt closed this as completed Jun 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants