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

isVerified

boolean into the component and not the whole function and let

fetchUser

fetchUser

destruct all the values only once in another module?

TanStack•4y ago•

4 replies

wet-aqua

How are you using RQ to replace a Redux Store?

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

isVerified

boolean into the component and not the whole function and let

fetchUser

fetchUser

destruct all the values only once in another module?

How are you using RQ to replace a Redux Store?

Similar Threads

How are you using RQ to replace a Redux Store?

Similar Threads

Similar Threads

Similar Threads