Daniel J. Lewis Posts - Answer Overflow

Daniel J. Lewis

•Created by Daniel J. Lewis on 5/16/2024 in #questions

How should I scale my fetch-heavy React/Next.js app?

I have a Next.js app that fetches and processes lots of data for an hour or two every few hours. This spikes the CPU on my Vultr 2-vCPU "high frequency" VPS. The problem is all that fetching from the cron tasks significantly slows down the frontend because of the CPU-spiking. So what is the best way to scale this? I'm considering: 1. Refactor my code so the cron-scheduled fetching happens on a different server, but then I have to create extra API endpoints on both sides for triggering the refreshes and clearing caches. 2. Upgrade my server to get more vCPUs or a VPS with 4 dedicated CPU cores. 3. Something with Kubernetes? Although I don't understand Kubernetes enough to understand how it could handle my scaling when it's the fetching my app does in the background that demands the scaling, not the number of users actively in my app. 4. Something else? Thanks in advance!

1 replies

TTCTheo's Typesafe Cult

•Created by Daniel J. Lewis on 12/22/2023 in #questions

Saving upload URL to database with item ID?

I'm using UploadThing in my Next.js project to let my users upload an image for one of their items in their account. So I need to get the image URL from UT into that specific item's record. What's the best way to do this? I thought the best way would be to make the DB update call in ourFileRouter as part of onUploadComplete(), but I can't figure out how to pass the item ID into the UT function so ourFileRouter could include that metadata on save. I know I could do this in my client component where the upload button/dropzone is because I'm already within the context of knowing the item ID, but is this safe? Thanks in advance!

1 replies

TTCTheo's Typesafe Cult

•Created by Daniel J. Lewis on 12/15/2023 in #questions

Get single number from Shadcn UI slider for form?

I'm using Shadcn UI, React Form, and Zod for my Next.js project. I'm using the slider component on part of the form:

        <FormField
          control={form.control}
          name="limit"
          defaultValue={user.limit}
          render={({ field }) => (
            <FormItem className="grid grid-cols-2 items-center grid-">
              <FormLabel>Limit:</FormLabel>
              <FormControl>
                <>
                  <div className="flex gap-4">
                    <Slider
                      onValueChange={field.onChange}
                      defaultValue={[field.value]}
                      max={100}
                      step={1}
                    />
                    <span>{field.value}</span>
                  </div>
                </>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="limit"
          defaultValue={user.limit}
          render={({ field }) => (
            <FormItem className="grid grid-cols-2 items-center grid-">
              <FormLabel>Limit:</FormLabel>
              <FormControl>
                <>
                  <div className="flex gap-4">
                    <Slider
                      onValueChange={field.onChange}
                      defaultValue={[field.value]}
                      max={100}
                      step={1}
                    />
                    <span>{field.value}</span>
                  </div>
                </>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

But the slider returns an array of values, even though I'm using only a single value. How do I get it to pass only that first array value to field.onChange? I tried onValueChange={field.value[0] => field.onChange}, but that produces an error. I thought to make my own handleFieldChange function to convert the array into a single number, but I couldn't figure out how to get the value back into the form. Can you please help? Thanks in advance!

2 replies

TTCTheo's Typesafe Cult

•Created by Daniel J. Lewis on 7/5/2023 in #questions

How to upload blob from audio recorder?

I've spent all day banging my head on my keyboard trying to upload an audio file to S3/B2 that was recorded from my React app. Then I remembered to try UploadThing. But I've hit another brick wall. How do I upload a blob with UploadThing? I tried startUpload([blob]) but it tells me, "Type 'Blob' is missing the following properties from type 'File': lastModified, webkitRelativePath." (The audio blob comes from https://www.npmjs.com/package/react-audio-voice-recorder.) My brain is mush now, so can you help me? Thanks in advance!

5 replies

Gaming

Programming