I got this massy lines of codes sitting in App.js

  const { userInfo } = useSelector((state) => state.user); // JWT details
  const dispatch = useDispatch();

  const { data, loading } = useQuery(GET_USER_DETAILS);
  const { data: cartData, loading: cartLoading } = useQuery(GET_USER_CART);
  const { data: orderData, loading: orderLoading } = useQuery(GET_USER_ORDER);

  useEffect(() => {
    if (!loading && data && data?.getUserById.id === userInfo?.id) {
      dispatch(loginUser(data?.getUserById, loading));
    }
  }, [dispatch, data, loading, userInfo?.id]);

  useEffect(() => {
    if (
      !cartLoading &&
      cartData &&
      cartData?.getUserCart.userId === userInfo?.id
    ) {
      dispatch(addToCart(cartData?.getUserCart));
    }
  }, [dispatch, cartData, cartLoading, userInfo?.id]);

  useEffect(() => {
    if (
      !orderLoading &&
      orderData &&
      orderData?.getUserOrders[0]?.purchasedBy === userInfo?.id
    ) {
      dispatch(addOrder(orderData?.getUserOrders));
    }
  }, [dispatch, orderData, orderLoading, userInfo?.id]);

if you wondering why is that, everytime user is logged in I am getting the data from backend(cart data, orders data, user profile data) and put that right into my redux-store.

Is there any way to move it to another component and then just call it in App.js? Ty :D