T
TanStack•4y ago
ambitious-aqua

How are you using RQ to replace a Redux Store?

We are migrating from Redux to RQ. Everything is going well but I wanted to get some opinions on something. We had a redux store for our user object, but now with RQ I have created a function that fetches the user that I re-use. The function is called in various places in the app, but wondered if it may be better to do the fetch once, assign the data to variables and then import them into each component. How is everyone else managing this? For example here is the fetch query: 
export const fetchUser = () => {
    return useQuery(["user"],
        async () => {
            const { data } = await axios({
                url: foo,
                headers: { ...getHeaders(reduxState) },
                method: "get"
            });
            console.log(data);
            return data;
        },
        { refetchOnWindowFocus: true }
    );
};
export const fetchUser = () => {
    return useQuery(["user"],
        async () => {
            const { data } = await axios({
                url: foo,
                headers: { ...getHeaders(reduxState) },
                method: "get"
            });
            console.log(data);
            return data;
        },
        { refetchOnWindowFocus: true }
    );
};
Then I use the function in multiple places 
import { fetchUser } from "foo";

const { data: userData } = fetchUser();
const isVerified = userData?.is_verified;
import { fetchUser } from "foo";

const { data: userData } = fetchUser();
const isVerified = userData?.is_verified;
Maybe I only import the isVerified boolean into the component and not the whole function and let fetchUser destruct all the values only once in another module?
2 Replies
stormy-gold
stormy-gold•4y ago
in fetchUser, you could perhaps use spread to add isVerified as member of the return then that would allow you to do const { isVerified } = fetchUser(); aside from this - unless your data is huge do not worry about optimising destructuring, it doesn't have too much of a performance impact, i have an app with MB RQ data queries and my max RAM usage is 120MB, it will usually be tiny in comparison to sites like youtube which can scale beyond 1000MB+
ambitious-aqua
ambitious-aquaOP•4y ago
Great, I will take a look. Thanks 🙂

Did you find this page helpful?