title: Approaches for using RTK-Query hooks inside functions?
body: <p>I've successfully written my application using Axios to fetch content. As of now, it's set up to fetch content when certain events happen (like the submit button has been clicked.) However, I'm experimenting with <strong>Redux's RTK-Query</strong> solution. This package generates hooks and in their <a href="https://redux-toolkit.js.org/tutorials/rtk-query/" rel="noreferrer">examples</a>, they provide simple component-level examples that call the hooks on mount.</p>
  <p><strong>How can I leverage these rtk-hooks (and hooks in general) so I can tie them to behaviors like <code>onClick</code>, <code>onSubmit</code>, and conditional events?</strong> I'm aware this conflicts with the <a href="https://reactjs.org/docs/hooks-rules.html" rel="noreferrer"><em>rules-of-hooks</em></a> guidelines, but I can't imagine RTK-Query would be so limited as to only allow component-level onMount API calls.</p>
  <blockquote>
  <p>some related articles I'm reading while I try to figure this out / wait for a helpful example:</p>
  </blockquote>
  <ul>
  <li><a href="https://blog.logrocket.com/react-hooks-frustrations/" rel="noreferrer">https://blog.logrocket.com/react-hooks-frustrations/</a></li>
  <li><a href="https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks" rel="noreferrer">https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks</a></li>
  </ul>
  <p>The second article seems somewhat relevant but I feel like its beating too far off the path and is making question if it's even worth having <code>rtk-query</code> installed. I might as well just use <code>axios</code> since it can be used anywhere in my components and logic. <strong>Can someone educate me on how to approach this problem? I'm new to rtk-query, it seems really cool but it also seems really restrictive in its implementation approaches.</strong></p>
  <h4>Here is an example of my <code>api.ts</code> slice:</h4>
  <pre class="lang-js prettyprint-override"><code>import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
  
  const apiEndpoint = 'http://localhost:5000';
  
  export const myApi = createApi({
    reducerPath: 'myApi',
    baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
    endpoints: builder =&gt; ({
      getFileById: builder.query&lt;any, { id: string; fileId: string }&gt;({
        query: arg =&gt; {
          const { id, fileId } = arg;
          return `/service/${id}/files/${fileId}`;
        },
      }),
    }),
  });
  
  // RTK Query will automatically generate hooks for each endpoint query
  export const { useGetFileByIdQuery } = myApi;
  </code></pre>
  <h4>generic example using axios:</h4>
  <pre class="lang-js prettyprint-override"><code>const handleSubmit = async (): Promise&lt;void&gt; =&gt; {
      try {
        const getResponse = await axios.get('my-endpoint/abc/123');
      }
      catch (e) {
       ...
      }
  }
  </code></pre>