Chanchana•2y ago

Do Convex actions have a timeout? If so, how long?

1. Does convex actions have limited timeout threshold similar to Vercel? 2. How would you implement something that requires long await time e.g. sending an API to a AI image generator that is experiencing cold start so it takes around 20 seconds? - Would you break it into 2 steps i.e. send image generation request, then let the API call the webhook on the way back. - Or would you just request the image generation process and await for 20 seconds inside convex action?

24 Replies

ChanchanaOP•2y ago

For context: i am building a web app which allows users to upload their own photo and it'll generate 10 variations of the photo using AI. basically user will get 10 generated AI images. user perspective: user upload the photo, he will see 10 spinning icons indicating that the image variations are being generated. as soon as any image finishes generation, it will replace spinning icon. not all 10 spinning icons will be done at the same time because it's 10 parallel requests to the AI. I just want to know how to design the data flow process to work with Convex. I'm new to webdev in general (studied 3 weeks ago). Thanks.

lee•2y ago

hi! great questions! convex actions https://docs.convex.dev/functions/actions currently have a timeout of 5 minutes, so it should be possible to await a result within an action. however, your webhook idea would be a little more efficient and more granular. for example, convex prices actions on GB*s, so an action that's waiting around for 20 seconds may cost more than a webhook-based approach (but it would still probably be fine, especially as a first implementation). check out this starter for streaming data from an action into convex https://stack.convex.dev/gpt-streaming-with-persistent-reactivity

Actions | Convex Developer Hub

Actions can call third party services to do things such as processing a payment

GPT Streaming With Persistent Reactivity

Stream GPT responses without brittle browser-based HTTP streaming. Multiplayer reactivity, persistence, reactivity via Convex. Using OpenAI’s beta v4....

ChanchanaOP•2y ago

Thanks @lee , 5 minutes is good enough for my prototype. I'll try to check the streaming project you suggested. BTW, I've tried the convex-tour-chat tutorial and I mostly saw that the query and mutation functions are used in the browser client for reactivity purposes. Is it possible to use them in the server as well?

lee•2y ago

for sure! what kind of server is it? on a Node.js server you can use ConvexHttpClient https://docs.convex.dev/api/classes/browser.ConvexHttpClient as described in the quickstart https://docs.convex.dev/quickstart/nodejs, (or if you want the reactivity you can use BaseConvexClient but server-side reactivity is more difficult). On a python or rust server you can use our python or rust libraries, which have similar quickstarts.

Class: ConvexHttpClient | Convex Developer Hub

browser.ConvexHttpClient

ChanchanaOP•2y ago

I'll use it on Node server on Vercel serverless functions. On browser I'll use Svelte so I'll check to see if it works. (I've only tried chat tutorial with react). I just tried the NodeJS tutorial above and I got this error:

C:\Users\off99\Documents\Code\_playground\svelte\test-convex\convex\_generated\api.js:12
import { anyApi } from "convex/server";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1197:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (C:\Users\off99\Documents\Code\_playground\svelte\test-convex\script.js:2:17)
    at Module._compile (node:internal/modules/cjs/loader:1233:14)

Node.js v20.4.0

C:\Users\off99\Documents\Code\_playground\svelte\test-convex\convex\_generated\api.js:12
import { anyApi } from "convex/server";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1197:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (C:\Users\off99\Documents\Code\_playground\svelte\test-convex\script.js:2:17)
    at Module._compile (node:internal/modules/cjs/loader:1233:14)

Node.js v20.4.0

Could it be because I use pnpm instead of npm to install the libraries? OK I got it working now. I have to change the code to use ES6 style import:

import { ConvexHttpClient } from 'convex/browser'
import { api } from './convex/_generated/api.js'
import { config } from 'dotenv'
config({ path: '.env.local' })
const client = new ConvexHttpClient(process.env.CONVEX_URL)

client.query(api.tasks.get).then(console.log)

import { ConvexHttpClient } from 'convex/browser'
import { api } from './convex/_generated/api.js'
import { config } from 'dotenv'
config({ path: '.env.local' })
const client = new ConvexHttpClient(process.env.CONVEX_URL)

client.query(api.tasks.get).then(console.log)

But not sure why I need to do this when the tutorial doesn't do it.

ballingt•2y ago

@Chanchana I see this too, thanks for reporting! The Node.js quickstart uses CommonJS syntax because that's more common in Node.js, but to use that require syntax without a bundler you need to generate CommonJS code with npx convex codegen --commonjs Do you have "type": "module" in your package.json to make this just work?

ChanchanaOP•2y ago

Yes.

ChanchanaOP•2y ago

I'm having a hard time trying to make this work with Svelte?

ballingt•2y ago

(catching up on the thread) you want a reactive client? You can use BaseConvexClient in "convex/browser" or ConvexReactClient from "convex/react" even though you're in Node.js Let me find an example of that

ChanchanaOP•2y ago

Yes, I want reactive client on the browser. The NodeJS stuff was just me trying to learn the API

ballingt•2y ago

Oh sorry, Svelte in the browser right? gotcha

ChanchanaOP•2y ago

Yes

ballingt•2y ago

I would use the the ConvexReactClient, that's simplest. This shows using it outside of a React app: https://observablehq.com/@ballingt/hello-convex

Observable

Hello Convex

How do you get shared, reactive server-side state for an Observable notebook? There are many ways: AWS, firebase, a slick solution from Tom Larkworthy — and now there's one more, Convex. You can sign up for the Convex at convex.dev. To use Convex in a webapp or from Node.js the standard npm install convex etc. is recommended, but in Observable...

ballingt•2y ago

You can also use the BaseConvexClient to avoid the React dependency but there are more steps there

ChanchanaOP•2y ago

that looks quite perplexing. do you have a very simple project that shows how to link other frameworks other than React to a table in Convex? I think that Convex should try to create that project for Svelte or other frameworks. I don't even need it to be beautiful. Just a page that renders a few documents from convex db. I can just go to modify the docs inside the convex dashboard and see if it's reactive. or maybe this is discouraged? I'm not sure if i should use Convex.

ballingt•2y ago

We have folks using Convex with Vue and Solid, but there's not a good Svelte example. Rendering documents will be different in each framework, but this gist will be

const client = new ConvexReactClient(url);
const watch = client.watchQuery(api.messages.listMessages, {});
const unsubscribe = watch.onUpdate(() => {
  const data = client.localQueryResult(api.messages.listMessages);
  // update your Svelte store or whatever here
  console.log(data);
));
// once you're done
unsubscribe()

const client = new ConvexReactClient(url);
const watch = client.watchQuery(api.messages.listMessages, {});
const unsubscribe = watch.onUpdate(() => {
  const data = client.localQueryResult(api.messages.listMessages);
  // update your Svelte store or whatever here
  console.log(data);
));
// once you're done
unsubscribe()

ChanchanaOP•2y ago

Thanks I'll try it out. BTW, what do you mean by React dependency though? Would it interfere with my Svelte project?

ballingt•2y ago

Nope! You just need to have React installed.

jamwt•2y ago

this needs to be updated, but I did this awhile ago: https://github.com/jamwt/svelte-convex

GitHub

GitHub - jamwt/svelte-convex: Quick, rough example using Convex wit...

Quick, rough example using Convex with Svelte. Contribute to jamwt/svelte-convex development by creating an account on GitHub.

ChanchanaOP•2y ago

@jamwt I was trying to copy your code from https://github.com/jamwt/svelte-convex/blob/main/src/lib/convexSvelteClient.ts into my SvelteKit project but I got this error. Do you know why? Maybe it's because of the different convex version? I have 1.0.2

GitHub

svelte-convex/src/lib/convexSvelteClient.ts at main · jamwt/svelte-...

Quick, rough example using Convex with Svelte. Contribute to jamwt/svelte-convex development by creating an account on GitHub.

jamwt•2y ago

yep! it needs to be updated for 1.0. I can probably do a quick pass on it this afternoon and ping this thread

ChanchanaOP•2y ago

Thank you a lot. Can you do it in SvelteKit format? Because I think most people are familiar with it.

jamwt•2y ago

depends on how bit the lift is! if it's a lot more work, might need to get to it later this week

ChanchanaOP•2y ago

ok if you can update convexSvelteClient.ts file in the repo above, It'd be enough for me to see how to incorporate into my SvelteKit project I guess

Do Convex actions have a timeout? If so, how long?

Did you find this page helpful?