Olamide•5mo ago

How do I skip queries when using convex with tanstack query.

I am passing a conditional boardId but only want the query to run if and only if the boardId is present. I have tried all these but none of them work:

import { convexQuery, useConvexMutation } from '@convex-dev/react-query';
import { useQuery, useMutation, skipToken } from '@tanstack/react-query';

// Trial one
export const useGetBoardById = (id?: Id<'boards'>) => {
  return useQuery(
    convexQuery(api.frontend.boards.getBoardById, id ? { id } : 'skip'),
  );
};

// Trial two.

export const useGetBoardById = (id?: Id<'boards'>) => {
  return useQuery({
    queryFn: id
      ? convexQuery(api.frontend.boards.getBoardById, { id }).queryFn
      : skipToken,
    queryKey: convexQuery(api.frontend.boards.getBoardById, { id: id! })
      .queryKey,
    staleTime: convexQuery(api.frontend.boards.getBoardById, { id: id! })
      .staleTime,
    enabled: !!id,
  });
};


//Trial three
export const useGetBoardById = (id?: Id<'boards'>) => {
  return useQuery({
 ...convexQuery(api.frontend.boards.getBoardById, { id: id! }),
    enabled: !!id,
  });
};

import { convexQuery, useConvexMutation } from '@convex-dev/react-query';
import { useQuery, useMutation, skipToken } from '@tanstack/react-query';

// Trial one
export const useGetBoardById = (id?: Id<'boards'>) => {
  return useQuery(
    convexQuery(api.frontend.boards.getBoardById, id ? { id } : 'skip'),
  );
};

// Trial two.

export const useGetBoardById = (id?: Id<'boards'>) => {
  return useQuery({
    queryFn: id
      ? convexQuery(api.frontend.boards.getBoardById, { id }).queryFn
      : skipToken,
    queryKey: convexQuery(api.frontend.boards.getBoardById, { id: id! })
      .queryKey,
    staleTime: convexQuery(api.frontend.boards.getBoardById, { id: id! })
      .staleTime,
    enabled: !!id,
  });
};


//Trial three
export const useGetBoardById = (id?: Id<'boards'>) => {
  return useQuery({
 ...convexQuery(api.frontend.boards.getBoardById, { id: id! }),
    enabled: !!id,
  });
};

Thank you in advance

6 Replies

jamalsoueidan•5mo ago

What does not work::: does it send the request, or does not?

useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
  enabled: false,
})

useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
  enabled: false,
})

you can try to set the enabled variable to TRUE or FALSE and see if that works.

ballingt•5mo ago

Enabled isn't supported yet, this is coming soon! https://github.com/get-convex/convex-react-query/issues/5

GitHub

Dependent queries are not working with tanstack query · Issue #5 · ...

Convex query is executed even if the enabled condition is not met. const { fetchStatus, data: ordersResponse, isError, isPending: isOrderPending, isSuccess } = useQuery({ ...convexQuery(api.orders....

ballingt•5mo ago

@Olamide for anything else you run into feel free to raise here but issues on this repo are also good.

OlamideOP•5mo ago

It sends the request even when the enabled is false. I tested the enabled flag works on other queries apart from convex queries and they worked fine Oh alright. Thank you. I will look out for that

jamalsoueidan•5mo ago

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

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

You can also use this method if you want to query conditional

OlamideOP•4mo ago

@jamalsoueidan Thank you

How do I skip queries when using convex with tanstack query.

Did you find this page helpful?