criminal-purple

Nothing happening with query

api.js

import axios from 'axios';
import { sortProductByPrice } from './util';

const getAllProducts = () => {
    axios.get("/queryproducts")
    .then((response) => {
        console.log(response);
        response.data.products.sort(sortProductByPrice);
    })
}

export { getAllProducts }

import axios from 'axios';
import { sortProductByPrice } from './util';

const getAllProducts = () => {
    axios.get("/queryproducts")
    .then((response) => {
        console.log(response);
        response.data.products.sort(sortProductByPrice);
    })
}

export { getAllProducts }

const Starter = () => {
    
    const queryClient = useQueryClient();
    const { isLoading, error, data } = useQuery("starter-products", getAllProducts);

    let location = useLocation();
    let urlParams = useParams();
    let [urlSearchParams] = useSearchParams();

    // const [data, setData] = useState([]);
    


    useEffect(() => {
    }, []);
    
    if (isLoading) return "wait";

    if (error) return error.message;

    return(
        <>
            {console.log(data)}
        </>
    );
};

const Starter = () => {
    
    const queryClient = useQueryClient();
    const { isLoading, error, data } = useQuery("starter-products", getAllProducts);

    let location = useLocation();
    let urlParams = useParams();
    let [urlSearchParams] = useSearchParams();

    // const [data, setData] = useState([]);
    


    useEffect(() => {
    }, []);
    
    if (isLoading) return "wait";

    if (error) return error.message;

    return(
        <>
            {console.log(data)}
        </>
    );
};

the data is fetched correctly from the api, but nothing ever happens with the useQuery data

12 Replies

eastern-cyan•2y ago

Hello. Return missing from getAllProducts or there is a not needed { } like:

const getAllProducts = () => 
    axios.get("/queryproducts")
    .then((response) => {
        console.log(response);
        response.data.products.sort(sortProductByPrice);
    })

const getAllProducts = () => {
    return  axios.get("/queryproducts")
    .then((response) => {
        console.log(response);
        response.data.products.sort(sortProductByPrice);
    })
}

criminal-purpleOP•2y ago

tried returning explicility but does not work status is success on the query but no data

eastern-cyan•2y ago

ah, I see. U also miss more one return. Just try it without sorting first: const getAllProducts = () => axios.get("/queryproducts") this was a void function cause of missing return

criminal-purpleOP•2y ago

    const query = useQuery("starter-products", () => {
         return axios.get("/queryproducts")
        .then((response) => {
            console.log(response);
            response.data.products.sort(sortProductByPrice);
        })
    });

    const query = useQuery("starter-products", () => {
         return axios.get("/queryproducts")
        .then((response) => {
            console.log(response);
            response.data.products.sort(sortProductByPrice);
        })
    });

Still does not work Query returns as successful but data field is undefined ah I fix

    const query = useQuery("starter-products", () => {
         return axios.get("/queryproducts")
        .then((response) => {
            console.log(response);
            return 
response.data.products.sort(sortProductByPrice);
        })
    });

    const query = useQuery("starter-products", () => {
         return axios.get("/queryproducts")
        .then((response) => {
            console.log(response);
            return 
response.data.products.sort(sortProductByPrice);
        })
    });

eastern-cyan•2y ago

yea! now it's not void. It's returning the value

criminal-purpleOP•2y ago

I don't want to handle the loading case, can I make async and await to ensure page only loads with data? or maybe I will prefetch with react router loader

eastern-cyan•2y ago

I think you should use useSuspenseQuery. ( https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery ) You can handle loading in higher layer or collect more loading component with one suspense. I can't help with react-router.

useSuspenseQuery | TanStack Query Docs

const result = useSuspenseQuery(options) `

eastern-cyan•2y ago

check it: https://tkdodo.eu/blog/seeding-the-query-cache

Seeding the Query Cache

With suspense for data fetching on the horizon, it is now more important than ever to make sure your cache is seeded properly to avoid fetch waterfalls.

criminal-purpleOP•2y ago

I dont see this function react-query is tanstack-query right ? oh its experimental i think

eastern-cyan•2y ago

Check you version. I suggest to use v5 react-query is an older version. now its @tanstack/react-query useSuspenseQuery is not experimental. It's base function Always check which version of docs do u reading. Google can suggest too much v4 links

criminal-purpleOP•2y ago

I've updated to v5 but getting this error now

Unexpected Application Error!
Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object

Unexpected Application Error!
Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object

Oh I need to pass object now

eastern-cyan•2y ago

yes. { queryKey: 'x' }

Gaming

Programming

Nothing happening with query

Did you find this page helpful?