harsh-harlequin

How to co-work with Redux dispatch under "Search" scenario with useQuery?

Hi , In my app, one param of API exists "keywords" for filtering, user can type something in the search box ( already considers debounce). Code for fetch like below, will dispatch data to store (Redux) after fetch success:

useEffect(() => {
        const params:{[key:string]: string} = {
                        keyWord: keyWord //user type
        };

        fetch(`/api/segments?${new URLSearchParams(params).toString()}`)
            .then((res:Response) => res.json())
            .then((data:APIResponseProps) => {
                dispatch(
                    setSegments(data as segmentProps[])
                );
            })
            .catch((err) => {
                history.push('/main');
            });
    }, [
        filters.keyWord
    ]);

useEffect(() => {
        const params:{[key:string]: string} = {
                        keyWord: keyWord //user type
        };

        fetch(`/api/segments?${new URLSearchParams(params).toString()}`)
            .then((res:Response) => res.json())
            .then((data:APIResponseProps) => {
                dispatch(
                    setSegments(data as segmentProps[])
                );
            })
            .catch((err) => {
                history.push('/main');
            });
    }, [
        filters.keyWord
    ]);

Replace with useQuery :

const params:{[key:string]: string} = {keyWord: keyWord };
useQuery(["segments", params], () => fetch(`/api/segments?${new URLSearchParams(params).toString()}`)
            .then((res:Response) => res.json()),
{
  onSuccess: ()=>{
    dispatch(
        setSegments(data as segmentProps[])
       )},
  onError: ()=> {
   history.push('/main');
}
})

const params:{[key:string]: string} = {keyWord: keyWord };
useQuery(["segments", params], () => fetch(`/api/segments?${new URLSearchParams(params).toString()}`)
            .then((res:Response) => res.json()),
{
  onSuccess: ()=>{
    dispatch(
        setSegments(data as segmentProps[])
       )},
  onError: ()=> {
   history.push('/main');
}
})

If I type "Covid 19" , will render related segments, the problem is, , as I delete "Covid 19" to "" then type it again , "Covid 19" result can't show out... Since "Covid 19" result already exists in cache , then onSuccess won't run , meaning segments in store didn't update, then right contents won't be rendered... I am using React query to replace all fetch & useEffect in my app, And I know useEffect can help solve this issue, like useEffect(() => dispatch( setSegments(data as segmentProps[])), [data]) should I really do that?

4 Replies

stormy-gold•3y ago

Hi 👋 No, you probably shouldn't be trying to synchronise the state of your query with a Redux store. The callbacks are only called when a request is made, not when fresh cached data is returned from the cache. I'd suggest not trying to synchronise the state of your query with a Redux store. If you'e already using Redux, RTK Query might be a more suitable choice for you

harsh-harlequinOP•3y ago

@TkDodo 🔮 is Louis correct?🥲

ratty-blush•3y ago

can you please trust other contributors to answer questions correctly 😅 yes, he is. It's one of the reasons why we are removing the onSuccess callback of queries. see: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

harsh-harlequinOP•3y ago

Yes, I'm sorry, thanks both of you.

Gaming

Programming

How to co-work with Redux dispatch under "Search" scenario with useQuery?

Did you find this page helpful?