get-convex/convex-demos

Demo apps built on Convex.

convex-demos's Issues

Error with Next.js rendering

Next.js is giving an error because UseContext is used with no "use client" in convex node_module
Server Error

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
React
node_modules/convex/dist/esm/react/client.js (281:22)
(rsc)/./node_modules/convex/dist/esm/react/client.js
file:///Users/ga104kin/code/next_project/.next/server/vendor-chunks/convex.js (560:1)

webpack_require
file:///Users/ga104kin/code/next_project/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/convex/dist/esm/react/use_queries.js (7:68)
(rsc)/./node_modules/convex/dist/esm/react/use_queries.js
file:///Users/ga104kin/code/next_project/.next/server/vendor-chunks/convex.js (600:1)
webpack_require
file:///Users/ga104kin/code/next_project/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/convex/dist/esm/react/use_paginated_query.js (9:73)
(rsc)/./node_modules/convex/dist/esm/react/use_paginated_query.js
file:///Users/ga104kin/code/next_project/.next/server/vendor-chunks/convex.js (590:1)
webpack_require
file:///Users/ga104kin/code/next_project/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/convex/dist/esm/react/index.js (20:81)
(rsc)/./node_modules/convex/dist/esm/react/index.js
file:///Users/ga104kin/code/next_project/.next/server/vendor-chunks/convex.js (570:1)
webpack_require
file:///Users/ga104kin/code/next_project/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./app/page.tsx (8:70)
(rsc)/./app/page.tsx
file:///Users/ga104kin/code/next_project/.next/server/app/page.js (211:1)
Function.webpack_require
file:///Users/ga104kin/code/next_project/.next/server/webpack-runtime.js (33:42)
async ek
file:///Users/ga104kin/code/next_project/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:455662)
async eJ
file:///Users/ga104kin/code/next_project/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:459752)
async eY
file:///Users/ga104kin/code/next_project/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:460227)
async eY
file:///Users/ga104kin/code/next_project/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:460358)
async eK
file:///Users/ga104kin/code/next_project/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:463770)
async
file:///Users/ga104kin/code/next_project/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:464248)

TypeError: console.time is not a function

calling console.time errors out when used in the convex backend, example:

export const list = query({
  args: {},
  handler: async (ctx) => {
    console.time("list query time");

    const { tokenIdentifier } = await authGuard(ctx)

    const ideas = await ctx.db.query("ideas")
      .filter((q) => q.eq(q.field("userId"), tokenIdentifier))
      .order("desc")
      .collect();

    console.timeEnd("list query time");

    return ideas
  },
});

Logs:

1/13/2024, 6:53:29 AM
40ms
failure
Query
ideas:list
failure
Uncaught TypeError: console.time is not a function
    at handler (../convex/ideas.ts:106:12)

Having issues with the storeUser.ts function

Error when i enter the device name

Welcome to developing with Convex, let's get you logged in.
? Device name: Apple’s MacBook Pro (2)
Unexpected Error: Error: unable to verify the first certificate

can anyone help me?

Is it possible to use zod objects within defineSchema function

It's great to have the zod helpers in zod-validation-ts however is it possible to use my Zod types when constructing a defineSchema function?

Will there be Vue JS/ Nuxt JS support in the near future?

Thank you for this!
If there isn't any planned Vue JS support how can we integrate Convex into a generic frontend project? Or would you have to set up a Node server?

why outgoing request timed out?

$ npm run dev

[email protected] dev
npm-run-all dev:init --parallel dev:server dev:client

[email protected] dev:init
convex dev --run init --until-success

Unexpected Error: RPError: outgoing request timed out after 10000ms
ERROR: "dev:init" exited with 1.

Network:
Unexpected Error: RPError: outgoing request timed out after 10000ms
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
Error: connect ETIMEDOUT 34.120.195.249:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
PS D:\ideas\ai-town> ping 34.120.195.249

正在 Ping 34.120.195.249 具有 32 字节的数据:
来自 34.120.195.249 的回复: 字节=32 时间=190ms TTL=108
来自 34.120.195.249 的回复: 字节=32 时间=154ms TTL=108
来自 34.120.195.249 的回复: 字节=32 时间=199ms TTL=108

Clerck and Convex setup in Expo app

Hi, I'm trying to setup Clerk in my Expo app which uses Convex. Followed this doc but I need some help because the app is not coming up. I reached to step 8 and decided to run the app to make sure the wiring is correct.

I have the env variable in auth.config.js for CLERK_JWT_ISSUER_DOMAIN which that exists in both local .env file as well as Convex's Environment Variables in Settings.

I use Expo package instead of react for step 6 from the above doc.
import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import { ConvexProviderWithClerk } from "convex/react-clerk";

CLERK_PUBLISHABLE_KEY is only in local .env file.

The code is wrapped inside these 2 providers.

<ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
  <ConvexProviderWithClerk
    client={convex}
    useAuth={useAuth}
  >
      My initial route stuff...
  </ConvexProviderWithClerk>
</ClerkProvider>

The result:

Would appreciate any help. I can provide more code snippets but the doc is pretty straightforward.

What is the best practice to store date?

Hello, What is the best practice to store date? I hope there is another data type for storing date.

defining two tables in schema produces type errors

My schema.ts file

export default defineSchema({
    foo: defineTable({
        foo_property: v.string()
    }),
    bar: defineTable({
        bar_property: v.string()
    })
});

my convex fn

export const createBar = mutation({
    args: {
      bar_property: v.string()
    },
    handler: async (ctx, args) => {
        await ctx.db.insert("bar", {
            bar_property: args.bar_property
        });
    }
});

adding bar_property in insert complains with Object literal may only specify known properties, and 'bar_property' does not exist in type '{ foo_property: string;}'

UI

At the moment there is some weird horizontal scroll which is happening on the docs page.

Here is the preview:
https://github.com/get-convex/convex-demos/assets/51208270/182c8332-bb2a-42a7-9486-26241d8e8cd2

Ik it's a simple fix, but do let me know if I can do this for you.
Thanks.

uploading an image from native app using upload URL fails

I'm using Expo and its ImagePicker lib to select an image to upload.
The library return the uri to the image which is in format of file:///Users/blablabla-lots-of-it/Library/Caches/ImagePicker/F2C150D4-505E-4371-9469-3663B2DA1C9F.jpg.

with that storageId comes back undefined always.

Is uploading via upload URLs not supported for react-native/expo?

Thanks.

testing

Does it support for svelte kit

Is there any support comming up for svelte kit, as I have run into problems, like api is outside of serving allow list, and also did not find a doc which explains svelte kit implementation.

Serving saved images do not work

I have followed the documentation and was able to save/upload images to storage.
I'm also successfully read them from storage and receive a http://... path but unfortunately that is not understood by Image component of ReactNative or Expo, so the images are not rendered.

...
{ imageSrc: await ctx.storage.getUrl(item.photoStorageId) }
...

console.log(imageSrc) 
=> https://graceXXXXXXXXXXXX.cloud/api/storage/XXX0de41-2f6d-XXX-XXXX-d4XXXXXX

Please ignore the Xs

Opening that URL in browser downloads a file with a long path to the image, but it's still not rendering any image.

How do I use this (imageSrc) with React Native Image component?

Thanks.

UserIdentity.tokenIdentifier vs UserIdentity.subject in storeUser function

Here:
https://docs.convex.dev/auth/database-auth

The docs recommend using identity.tokenIdentifier to store the external auth id into our DB.

But it looks like this:

console.log(identity.tokenIdentifier);
logs this:
'https://normal-quagga-15.clerk.accounts.dev|user_2UqFb5XFIur7dYbfl7GuCGoUuRH'

Is the left side really needed?

Why don't we do simply this?

console.log(identity.subject);
logs this:
'user_2UqFb5XFIur7dYbfl7GuCGoUuRH'

I think the user_2UqFb5XFIur7dYbfl7GuCGoUuRH is totally unique and enough, right?