holden Posts - Convex Community

holden

Posts Comments

CCConvex Community

•Created by holden on 10/19/2023 in #show-and-tell

ChartPilot - Conversational charts, powered by Convex + OpenAI

16 replies

CCConvex Community

•Created by holden on 9/22/2023 in #support-community

Import warning since upgrading Convex

After upgrading from Convex 1.0.3 to 1.3.1, I'm getting an import error:

- warn ../../node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/matt/Dev/whatsnext/chart-studio/node_modules/node-fetch/lib'

Import trace for requested module:
../../node_modules/node-fetch/lib/index.js
../../node_modules/convex/dist/esm/browser/http_client-node.js
../../node_modules/convex/dist/esm/browser/index-node.js
./src/utils/convex.ts
./src/app/project/[id]/page.tsx

- warn ../../node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/matt/Dev/whatsnext/chart-studio/node_modules/node-fetch/lib'

Import trace for requested module:
../../node_modules/node-fetch/lib/index.js
../../node_modules/convex/dist/esm/browser/http_client-node.js
../../node_modules/convex/dist/esm/browser/index-node.js
./src/utils/convex.ts
./src/app/project/[id]/page.tsx

I'm using a helper to setup Convex+Clerk and calling it from a NextJS app router page on the server (was previously working fine):

import { auth } from "@clerk/nextjs";
import { ConvexHttpClient } from "convex/browser";

/**
 * Return a ConvexHttpClient that can be used in server-side contexts.
 */
export async function getConvex(): Promise<ConvexHttpClient> {
  const { userId, getToken } = auth();
  if (!userId) {
    // Clerk middleware should handle this for us.
    throw new Error("Unexpected: user not signed in");
  }

  const token = await getToken({
    template: "convex",
  });

  if (!token) {
    throw new Error("Unexpected: failed to get Clerk token");
  }

  const url = process.env.NEXT_PUBLIC_CONVEX_URL;
  if (!url) {
    throw new Error("Unexpected: NEXT_PUBLIC_CONVEX_URL not found: ");
  }

  const client = new ConvexHttpClient(url);
  client.setAuth(token);

  return client;
}

import { auth } from "@clerk/nextjs";
import { ConvexHttpClient } from "convex/browser";

/**
 * Return a ConvexHttpClient that can be used in server-side contexts.
 */
export async function getConvex(): Promise<ConvexHttpClient> {
  const { userId, getToken } = auth();
  if (!userId) {
    // Clerk middleware should handle this for us.
    throw new Error("Unexpected: user not signed in");
  }

  const token = await getToken({
    template: "convex",
  });

  if (!token) {
    throw new Error("Unexpected: failed to get Clerk token");
  }

  const url = process.env.NEXT_PUBLIC_CONVEX_URL;
  if (!url) {
    throw new Error("Unexpected: NEXT_PUBLIC_CONVEX_URL not found: ");
  }

  const client = new ConvexHttpClient(url);
  client.setAuth(token);

  return client;
}

Anything I need to change after upgrading?

8 replies

CCConvex Community

•Created by holden on 8/24/2023 in #support-community

Debouncing mutations?

hi! I'm using Convex to store/update the state of a "project" object in my app. My naive approach works fine (and feels very fast), except in one case where I have a slider that feels very laggy (I think because it's attempting to update state many times/sec during the drag). What's the best way to fix this? After reading your docs, I was considering adding the useSingleFlight hook to throttle my mutations, and use optimistic updates to keep my local state/app feeling fast. Does it sound right that I should do both of these, or is that overcomplicating? Ideally, I want my local state to update instantly so my app feels snappy, even if mutations to the server are throttled somehow. (just looking for a pointer that I'm on the right track before I go implement all of this - thanks!)

8 replies

CCConvex Community

•Created by holden on 8/21/2023 in #support-community

Any way to undo/redo mutations?

Has anyone found a good way to implement undo/redo in a Convex app? I was previously using Liveblocks storage to store document state, and migrated to Convex. Overall happy with Convex so far, but the one Liveblocks feature I'm sad to lose is the useUndo, useRedo, useCanUndo, useCanRedo hooks: https://liveblocks.io/docs/api-reference/liveblocks-react#useUndo Those made it really easy to add undo/redo buttons to my app, and have it work across tabs/users. It doesn't look like Convex has anything built in for this? Anyone know if there's a good 3p library that might help here? This blog post convinced me I probably don't want to implement it myself 😉 https://liveblocks.io/blog/how-to-build-undo-redo-in-a-multiplayer-environment

14 replies

CCConvex Community

•Created by holden on 8/18/2023 in #support-community

[Update OpenAI tutorial docs]

Just a quick FYI/bug report to whoever writes your docs. I went through your tutorials yesterday to learn Convex (overall, they were great!). Part 3 needs a few updates since the "openai" package just changed: https://github.com/openai/openai-node/discussions/217

2 replies

CCConvex Community

•Created by holden on 8/17/2023 in #support-community

Validating id/schema values client side?

I have a NextJS route like app/project/[id], so my id comes in from a URL param. I want to render a 404 page if the id isn't valid. The docs suggest casting on the client, like this:

const project = useQuery(api.projects.get, { id: projectId as Id<"projects"> });

const project = useQuery(api.projects.get, { id: projectId as Id<"projects"> });

This correctly throws if the string isn't a valid id. Should I just catch this on the client to render a 404? Or is there some way to run a validator in a client component? I was imagining something like zod.safeParse where I could test if a string is a valid Id<"projects">.

22 replies

CCConvex Community

•Created by holden on 8/17/2023 in #support-community

Inferring full Typescript types from schema?

12 replies