Using Tanstack Query for the Update page on CRUD operations

Hi, I'm looking to shift my application from using regular fetch to tanstack query and looking to update my CRUD pages.

For a create operation this is more straight forward but I'm curious what sort of pattern people use with tanstack query since this has generally eliminated the need for my query to be within useEffect with.

Previously I would have just done my operation inside a

useEffect

useEffect

block which uses the set functions from

useState

useState

to set the values to be displayed in

    useEffect(() => {
        const fetchData = async () => {
            const pickemClient = PickemApiClientFactory.createClient();
            const league = await pickemClient.getLeagueByIdWithUserMapping(leagueId);
            setLeagueName(league.name);
            // Extra properties set here
        }

        fetchData();
    }, []);

    useEffect(() => {
        const fetchData = async () => {
            const pickemClient = PickemApiClientFactory.createClient();
            const league = await pickemClient.getLeagueByIdWithUserMapping(leagueId);
            setLeagueName(league.name);
            // Extra properties set here
        }

        fetchData();
    }, []);

Is there a better/cleaner way to accomplish this using tanstack query, which has previously eliminated a lot of need for my app to have

useEffect

useEffect

TanStack•5mo ago•

1 reply

dangerous-fuchsia

Using Tanstack Query for the Update page on CRUD operations

useEffect

useEffect

block which uses the set functions from

useState

useState

to set the values to be displayed in

    useEffect(() => {
        const fetchData = async () => {
            const pickemClient = PickemApiClientFactory.createClient();
            const league = await pickemClient.getLeagueByIdWithUserMapping(leagueId);
            setLeagueName(league.name);
            // Extra properties set here
        }

        fetchData();
    }, []);

    useEffect(() => {
        const fetchData = async () => {
            const pickemClient = PickemApiClientFactory.createClient();
            const league = await pickemClient.getLeagueByIdWithUserMapping(leagueId);
            setLeagueName(league.name);
            // Extra properties set here
        }

        fetchData();
    }, []);

Is there a better/cleaner way to accomplish this using tanstack query, which has previously eliminated a lot of need for my app to have

useEffect

useEffect

Using Tanstack Query for the Update page on CRUD operations

Similar Threads

Using Tanstack Query for the Update page on CRUD operations

Similar Threads

Similar Threads

Similar Threads