title: React-Query useQuery sending infinite fetch requests
body: <p>When I use useQuery as I have below, in the manner it is used on react-query's documentation, it sends an infinite number of fetch requests. The documentation also said that fetch doesn't automatically throw an error. So, I tried the same code below but with getAlbums using a try-catch block. I've also tried to configure the staleTime in an object in the useQuery hook, but it didn't work and I really don't know what stale time even is. LOL. Help me out please. Trying to get this project done by Monday</p>
  <p>found this error in my console:</p>
  <pre><code>(node:27609) UnhandledPromiseRejectionWarning: ReferenceError: navigator is not defined
      at OnlineManager.isOnline (/Users/benridesbikes/repos/photo_album/node_modules/react-query/lib/core/onlineManager.js:64:5)
      at /Users/benridesbikes/repos/photo_album/node_modules/react-query/lib/core/retryer.js:142:86
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:27609) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
  (node:27609) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
  </code></pre>
  <pre><code>import React from &quot;react&quot;;
  import { useQuery, useMutation, useQueryClient } from &quot;react-query&quot;;
  import Link from &quot;next/link&quot;;
  import Form from &quot;../../components/styles/Form&quot;;
  import Container from &quot;../../components/styles/AlbumsIndex&quot;;
  import Button from &quot;../../components/styles/Button&quot;;
  
  async function getAlbums() {
    const response = await fetch(`api/albums/`);
    const { albums } = await response.json();
    return albums;
  }
  
  async function createAlbum(newAlbum) {
    const response = await fetch(`/api/albums/create`, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
      body: JSON.stringify(newAlbum),
    });
    const { album } = await response.json();
    return album;
  }
  
  async function deleteAlbum(albumId) {
    await fetch(`/api/albums/delete`, {
      method: &quot;DELETE&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
      body: JSON.stringify(albumId),
    });
  }
  
  export default function Index() {
    const queryClient = useQueryClient();
  
    const refetchQuery = async () =&gt; {
      await queryClient.refetchQueries();
    };
  
    const { data: albums, error } = useQuery(&quot;albums&quot;, getAlbums);
  
    const mutationCreateAlbum = useMutation(createAlbum, {
      onSuccess: refetchQuery(),
    });
  
    const mutationDeleteAlbum = useMutation(deleteAlbum, {
      onSuccess: refetchQuery(),
    });
  
    const [formData, setFormData] = React.useState({
      name: &quot;&quot;,
      description: &quot;&quot;,
    });
  
    const handleChange = (event) =&gt; {
      setFormData({ ...formData, [event.target.name]: event.target.value });
    };
  
    const handleSubmit = (event) =&gt; {
      event.preventDefault();
      mutationCreateAlbum.mutate({
        name: formData.name,
        description: formData.description,
      });
      setFormData({
        name: &quot;&quot;,
        description: &quot;&quot;,
      });
    };
  
    const useDeleteMutation = (albumId) =&gt; {
      mutationDeleteAlbum.mutate({
        id: albumId,
      });
    };
  
    return (
      &lt;Container&gt;
        &lt;Form&gt;
          &lt;h1&gt;Create a New Album&lt;/h1&gt;
          &lt;label htmlFor=&quot;name&quot;&gt;
            Name:
            &lt;input
              type=&quot;text&quot;
              id=&quot;name&quot;
              name=&quot;name&quot;
              value={formData.name}
              onChange={handleChange}
              placeholder=&quot;Give Your Album a Name!&quot;
            /&gt;
          &lt;/label&gt;
          &lt;label htmlFor=&quot;description&quot;&gt;
            Description:
            &lt;input
              type=&quot;text&quot;
              id=&quot;description&quot;
              name=&quot;description&quot;
              value={formData.description}
              onChange={handleChange}
              placeholder=&quot;Give Your Album a Description!&quot;
            /&gt;
          &lt;/label&gt;
          &lt;Button onClick={(event) =&gt; handleSubmit(event)}&gt;
            Make New Album!
          &lt;/Button&gt;
        &lt;/Form&gt;
        &lt;div className=&quot;albums&quot;&gt;
          {albums &amp;&amp;
            albums.map((album) =&gt; (
              &lt;div className=&quot;album&quot; key={album.id}&gt;
                &lt;Link href={`/albums/${album.id}`}&gt;
                  &lt;a&gt;
                    &lt;Button&gt;{album.name}&lt;/Button&gt;
                  &lt;/a&gt;
                &lt;/Link&gt;
                &lt;h3&gt;{album.description}&lt;/h3&gt;
                &lt;Button onClick={() =&gt; useDeleteMutation(album.id)}&gt;
                  Delete
                &lt;/Button&gt;
              &lt;/div&gt;
            ))}
        &lt;/div&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>