title: Next.js: How to create get request using React Query
body: <p>I want to integrate to <strong>React query</strong> for fetching the data from server. <br/>
  So far I've been fetching the <strong>rest api</strong> via <strong>Axios</strong>. <br/>
  I have created a custom hook for fetching and want to transform and implement with react query.
  While trying to implement the same logic I encountered an error trying to destructure the fetched data <code>const { data } = useApiRequest(headersUrl)</code>:</p>
  <pre><code>error - TypeError: (0 , _hooks_useApiRequest__WEBPACK_IMPORTED_MODULE_1__.UseApiRequest) is not a function
  </code></pre>
  <p>Here is the old logic for fetching</p>
  <pre><code>import * as React from &quot;react&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { HeaderToken } from &quot;../services/api&quot;;
  export const useApiRequest = (url: any) =&gt; {
   const [data, setData] = useState&lt;[] | any&gt;([]);
  
   useEffect(() =&gt; {
     const fetchData = () =&gt; {
       axios
         .get(url, {
           headers: {
             Authorization: `Basic ${HeaderToken}`,
           },
         })
         .then((response) =&gt; {
           setData(response.data);
         })
         .catch((error) =&gt; console.error(error));
     };
     fetchData();
   }, [url]);
  
   return { data };
  };
  </code></pre>
  <p>And here is how I'm trying to convert it:</p>
  <pre><code>import { HeaderToken } from &quot;../services/api&quot;;
  import { useQuery } from &quot;react-query&quot;;
  
  export const useApiRequest = (url: any) =&gt; {
    const { isLoading, data } = useQuery(&quot;bc&quot;, async () =&gt; {
      const response = await fetch(url, {
        method: &quot;get&quot;,
        headers: {
          Authorization: `Basic ${HeaderToken}`,
          &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
      });
      if (!response.ok) throw new Error(response.statusText);
      return await response.json();
    });
  
    return { data };
  };
  </code></pre>