Dependent queries are not working with tanstack query

Irutom commented 1 month ago

Convex query is executed even if the enabled condition is not met.

  const { fetchStatus, data: ordersResponse, isError, isPending: isOrderPending, isSuccess } = useQuery({
    ...convexQuery(api.orders.getOrdersByCartIds, { cartDocIds: cartDocIds ?? [], fetchProducts: true }),
    enabled: !!cartDocIds?.length,
  });

Query

export const getOrdersByCartIds = zQuery({
  args: {
    cartDocIds: z.array(zid(CollectionNameEnum.enum.shopping_carts)).min(1),
    fetchProducts: z.boolean().optional(),
  },
...

Below is the error

Uncaught ConvexError: {"ZodError":[{"code":"too_small","minimum":1,"type":"array","inclusive":true,"exact":false,"message":"Array must contain at least 1 element(s)","path":["cartDocIds"]}]}

https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries

thomasballinger commented 1 month ago

For anyone looking for a workaround, you can use the non-TanStack hook useConvexQuery():

  const ordersResponse = useConvexQuery(
    api.orders.getOrdersByCartIds, 
    !!cartDocIds?.length ? { cartDocIds: cartDocIds ?? [], fetchProducts: true }) : "skip"
    // "skip" is a special value that causes the query not to run https://docs.convex.dev/client/react#skipping-queries
  });

We should support this though, shouldn't be hard.

jamalsoueidan commented 3 weeks ago

Why not just this method below?

const convex = useConvex();
// later
const result = await convex.query(api.asd);

thomasballinger commented 3 weeks ago

The dependent queries @Irutom wants here are still reactive, just off sometimes when the arguments aren't available.

get-convex / convex-react-query

Dependent queries are not working with tanstack query #5