Danny I•5mo ago

Correct pattern for running a query onClick without re-running on re-render.

Hi, newbie in need of advice. Using React(Native), I am taking a document name from a user via a textInput field and onClick I want to check if that document exists. I don't want to run the query everytime the user types something...

export default function Home() {
    const [conversationName, setConversationName] = useState(''); // Updates the component
    const addConversation = useMutation(api.conversations.createConversation);

    const handleStart = async () => {
        const conversationExists = await useQuery(api.conversations.exists, { name: conversationName as string });
        if (!conversationExists) {
            await addConversation({ name: conversationName as string, owner: "owner", participants: ["Danny"] });
        }
        router.push({ pathname: `/${conversationName}` });
    };

    return ...

export default function Home() {
    const [conversationName, setConversationName] = useState(''); // Updates the component
    const addConversation = useMutation(api.conversations.createConversation);

    const handleStart = async () => {
        const conversationExists = await useQuery(api.conversations.exists, { name: conversationName as string });
        if (!conversationExists) {
            await addConversation({ name: conversationName as string, owner: "owner", participants: ["Danny"] });
        }
        router.push({ pathname: `/${conversationName}` });
    };

    return ...

Can anyone advise me on the correct way to do this? Thank you! 🙇🏻‍♂️ 🙏🏼

2 Replies

sshader•5mo ago

Check out https://docs.convex.dev/client/react#one-off-queries

Convex React | Convex Developer Hub

Convex React is the client library enabling your React application to interact

Danny IOP•5mo ago

Thank you so much 🙏🏻

Correct pattern for running a query onClick without re-running on re-render.

Did you find this page helpful?