title: Refetching upon a button click in RTK Query does not trigger component update
body: <p>Hello all and thanks in advance.</p>
  <p>Just to begin with, I am aware that weather data is not a suitable use case for RTK Query as it is always changing, I am using RTK Query in this case just for practicing purposes.
  I want to refetch weather data upon a button click but the component is not being updated, however I can see that the <code>requestId</code> is indeed changing when clicking the refresh button and that data is being retrieved, by checking the console.
  I am doing the refetch as in the example that can be found in the official docs:</p>
  <p><a href="https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-demand-with-refetchinitiate" rel="nofollow noreferrer">https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-demand-with-refetchinitiate</a></p>
  <p>I am also wondering if it would be more suitable to use useLazyQuery and its <code>trigger</code> function instead...</p>
  <p><a href="https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#uselazyquery" rel="nofollow noreferrer">https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#uselazyquery</a></p>
  <p>...but if so, what should I take into account in order to decide if I use useQuery or useLazyQuery?</p>
  <pre><code>    import {
    IonButton,
    IonButtons,
    IonCard,
    IonCol,
    IonContent,
    IonGrid,
    IonHeader,
    IonPage,
    IonRow,
    IonTitle,
    IonToolbar,
  } from &quot;@ionic/react&quot;;
  import styles from &quot;./Tab1.module.css&quot;;
  import { RefreshOutline } from &quot;react-ionicons&quot;;
  import { Geolocation } from &quot;@capacitor/geolocation&quot;;
  import { useEffect } from &quot;react&quot;;
  import { RootState } from &quot;../app/store&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { useGetCurrentPositionWeatherQuery } from &quot;../services/weather&quot;;
  import { setQueryCoord } from &quot;../app/coordQuerySlice&quot;;
  import TestSkeleton from &quot;../components/TestSkeleton&quot;;
  
  const Tab1: React.FC = (): JSX.Element =&gt; {
    const dispatch = useDispatch();
    const coordQueryState = useSelector((state: RootState) =&gt; state.coordQuery);
    const {
      requestId,
      refetch,
      data: weatherData,
      isLoading,
    } = useGetCurrentPositionWeatherQuery(
      {
        lat: coordQueryState.lat,
        lon: coordQueryState.lon,
        appid: &quot;xxxx&quot;,
      },
      { skip: coordQueryState.skip }
    );
  
    const setCurrentPosition = async () =&gt; {
      const data = await Geolocation.getCurrentPosition();
      const {
        coords: { latitude: latFetched },
        coords: { longitude: lonFetched },
      } = data;
      dispatch(setQueryCoord({ lat: latFetched, lon: lonFetched, skip: false }));
    };
  
    useEffect(() =&gt; {
      setCurrentPosition();
    }, []);
  
    function refreshCurrentPositionHandler() {
      refetch();
    }
  
    console.log(requestId);
    return (
      &lt;IonPage&gt;
        &lt;IonHeader&gt;
          &lt;IonToolbar className={styles[&quot;ion-toolbar-dashboard&quot;]}&gt;
            &lt;IonTitle className=&quot;ion-margin-bottom&quot; size=&quot;large&quot;&gt;
              Dashboard
            &lt;/IonTitle&gt;
            &lt;IonButtons slot=&quot;end&quot;&gt;
              &lt;IonButton&gt;
                &lt;RefreshOutline
                  onClick={refreshCurrentPositionHandler}
                  color={&quot;black&quot;}
                  height=&quot;35px&quot;
                  width=&quot;35px&quot;
                  cssClasses={styles.refreshOutline}
                /&gt;
              &lt;/IonButton&gt;
            &lt;/IonButtons&gt;
          &lt;/IonToolbar&gt;
        &lt;/IonHeader&gt;
        &lt;IonContent fullscreen&gt;
          &lt;&gt;{!weatherData &amp;&amp; &lt;TestSkeleton /&gt;}&lt;/&gt;
          {weatherData &amp;&amp; (
            &lt;&gt;
              &lt;IonGrid&gt;
                &lt;IonRow style={{ margin: &quot;10px&quot; }}&gt;
                  &lt;IonCol className=&quot;ion-text-center&quot;&gt;
                    &lt;h1 style={{ fontSize: &quot;20px&quot; }}&gt;
                      Here's your location based weather
                    &lt;/h1&gt;
                  &lt;/IonCol&gt;
                &lt;/IonRow&gt;
              &lt;/IonGrid&gt;
              &lt;IonGrid&gt;
                &lt;IonCard&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol className=&quot;ion-text-center&quot;&gt;test content 1&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol className=&quot;ion-text-center&quot;&gt;test content 2&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol className=&quot;ion-text-center&quot;&gt;test content 3&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol&gt;&lt;/IonCol&gt;
                    &lt;IonCol&gt;&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol&gt;&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol&gt;&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                  &lt;IonRow&gt;
                    &lt;IonCol&gt;&lt;/IonCol&gt;
                  &lt;/IonRow&gt;
                &lt;/IonCard&gt;
              &lt;/IonGrid&gt;
            &lt;/&gt;
          )}
        &lt;/IonContent&gt;
      &lt;/IonPage&gt;
    );
  };
  
  export default Tab1;
  </code></pre>