Dependent queries are not working with tanstack query

[Irutom]

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]

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]

Why not just this method below?

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

[thomasballinger]

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

[thomasballinger]

This works for "skip" now, but not enabled: false

[Irutom]

@thomasballinger Could you clarify whether you’re referring to tanstack’s useQuery or convex’s useConvexQuery()? An example would be helpful for better understanding.

[thomasballinger]

@Irutom here's an example

convex-react-query/src/example.tsx

Line 72 in 9362c61

// This is a conditional query

This is convexQuery used to create options for TanStack's useQuery.