Which Query to stale?

I have 2 hooks. 1 fetches the employers, the other manipulates the data. All I care about is that the data is fetched on mount. No other fetches are required.

Do I set the hook that manipulates the data with the stale time (useFetchEmployersQuery) as that is the hook that I am using in my component and mapping through the data returned.

export const useFetchEmployers = () => {
    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        }
    );
};

export const useFetchEmployersQuery = () => {
    const platformEmployerTypes = [1, 3];

    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        },
        {
            select: (data) => data.filter((item) => platformEmployerTypes.includes(item.type))
        },
        {
            staleTime: Infinity,
            cacheTime: Infinity
        }
    );
};

export const useFetchEmployers = () => {
    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        }
    );
};

export const useFetchEmployersQuery = () => {
    const platformEmployerTypes = [1, 3];

    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        },
        {
            select: (data) => data.filter((item) => platformEmployerTypes.includes(item.type))
        },
        {
            staleTime: Infinity,
            cacheTime: Infinity
        }
    );
};

TanStack•4y ago•

9 replies

wet-aqua

Which Query to stale?

export const useFetchEmployers = () => {
    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        }
    );
};

export const useFetchEmployersQuery = () => {
    const platformEmployerTypes = [1, 3];

    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        },
        {
            select: (data) => data.filter((item) => platformEmployerTypes.includes(item.type))
        },
        {
            staleTime: Infinity,
            cacheTime: Infinity
        }
    );
};

export const useFetchEmployers = () => {
    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        }
    );
};

export const useFetchEmployersQuery = () => {
    const platformEmployerTypes = [1, 3];

    return useQuery([employers.fetchEmployers],
        async () => {
            const { data } = await axios({
                url: foo,
                method: "get"
            });
            return data;
        },
        {
            select: (data) => data.filter((item) => platformEmployerTypes.includes(item.type))
        },
        {
            staleTime: Infinity,
            cacheTime: Infinity
        }
    );
};

Which Query to stale?

Similar Threads

Which Query to stale?

Similar Threads

Similar Threads

Similar Threads