2 replies

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 ...

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!

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

Similar Threads

Similar Threads

Similar Threads