Ragpud Comments - Convex Community

Ragpud

•Created by Web Dev Cody on 2/2/2024 in #support-community

Running into this same typescript error

Hey @Web Dev Cody , how did you get on with this problem? I'm using Michael's suggestion as a fix but just wondering if you've found a better way

17 replies

CCConvex Community

•Created by Ragpud on 3/12/2024 in #support-community

Ents + Server components

Sorry my bad, in typing out the response I realised I made a typo along the way. I spent a long time figuring out how to make a custom preloadQuery function the same way I've mad a custom query and mutation for Ents, my apologies apologies!

6 replies

CCConvex Community

•Created by Ragpud on 3/12/2024 in #support-community

Ents + Server components

Hi Michael, certainly. Here's my query:

export const getAll = zQuery({
  args: { user: zid("users") },
  handler: async (ctx: QueryCtx, { user }) => {
    const tasks = await ctx
      .table("users")
      .getX(user)
      .edge("tasks");

    return tasks;
  },
});

export const getAll = zQuery({
  args: { user: zid("users") },
  handler: async (ctx: QueryCtx, { user }) => {
    const tasks = await ctx
      .table("users")
      .getX(user)
      .edge("tasks");

    return tasks;
  },
});

I forgot to add I'm using the convex zod helpers, so here's the zQuery function for context:

export const zQuery = zCustomQuery(
  query,
  customCtx(async (ctx) => {
    return {
      table: entsTableFactory(ctx, entDefinitions),
      db: undefined,
    };
  })
);

export const zQuery = zCustomQuery(
  query,
  customCtx(async (ctx) => {
    return {
      table: entsTableFactory(ctx, entDefinitions),
      db: undefined,
    };
  })
);

I'm calling the query like so in a react component:

  const preloadedTasks = await preloadQuery(api.tasks.getAll, {
    audioGuideId: audioGuideId,
  });
  return <Tasks tasks={preloadedTasks} />

  const preloadedTasks = await preloadQuery(api.tasks.getAll, {
    audioGuideId: audioGuideId,
  });
  return <Tasks tasks={preloadedTasks} />

and passing it into a component below as documented, to be used with usePreloadedQuery. The problem occurs when specifying the props in the component that consumes the preloaded query:

const Tasks = ({preloadedTasks}: {preloadedTasks: Preloaded<typeof api.tasks.getAll>)

const Tasks = ({preloadedTasks}: {preloadedTasks: Preloaded<typeof api.tasks.getAll>)

What I'm passing into Tasks doesn't match what's expected for some reason, I think it's because the Preloaded helper doesn't expect an Ents table?

6 replies