Repository: tannerlinsley/react-query
Pull request #1566 (2021-01-04 19:05:46)

docs: Fix misleading code example
I believe this code example is broken

vercel[bot]: This pull request is being automatically deployed with Vercel ([learn more](https://vercel.link/github-learn-more)).  
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: [https://vercel.com/tannerlinsley/react-query/e6uvdn3y4](https://vercel.com/tannerlinsley/react-query/e6uvdn3y4)  
✅ Preview: *In Progress*



Patch:
diff --git a/docs/package.json b/docs/package.json
index 7f26cd01c..6f66755d0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,9 +20,12 @@
     "@next/mdx": "^9.5.3",
     "@next/plugin-google-analytics": "^9.5.3",
     "@reactions/component": "^2.0.2",
+    "@visx/hierarchy": "^1.0.0",
+    "@visx/responsive": "^1.3.0",
     "@zeit/fetch": "^6.0.0",
     "@zeit/react-jsx-parser": "^2.0.0",
     "async-sema": "^3.1.0",
+    "axios": "^0.21.1",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
diff --git a/docs/src/components/LayoutDocs.js b/docs/src/components/LayoutDocs.js
index a5fc55b9f..cc229a70c 100644
--- a/docs/src/components/LayoutDocs.js
+++ b/docs/src/components/LayoutDocs.js
@@ -74,7 +74,7 @@ export const LayoutDocs = props => {
           </Sticky>
         )}
         <Seo
-          title={title || props.meta.title}
+          title={props.meta.title || title}
           description={props.meta.description}
         />
         <div className="block">
diff --git a/docs/src/components/SponsorPack.js b/docs/src/components/SponsorPack.js
new file mode 100644
index 000000000..340ebfcd7
--- /dev/null
+++ b/docs/src/components/SponsorPack.js
@@ -0,0 +1,117 @@
+import React from 'react'
+import { Pack, hierarchy } from '@visx/hierarchy'
+import { ParentSize } from '@visx/responsive'
+
+export default function SponsorPack({ sponsors, height }) {
+  const pack = React.useMemo(
+    () => ({
+      children: sponsors,
+      name: 'root',
+      radius: 0,
+      distance: 0,
+    }),
+    [sponsors]
+  )
+
+  const root = React.useMemo(
+    () =>
+      hierarchy(pack)
+        .sum(d => 100 + d.monthlyPriceInCents)
+        .sort(
+          (a, b) => b.data.monthlyPriceInCents - a.data.monthlyPriceInCents
+        ),
+    [pack]
+  )
+
+  return (
+    <ParentSize>
+      {({ width }) => {
+        return width < 10 ? null : (
+          <div
+            style={{
+              width,
+              height,
+              position: 'relative',
+            }}
+          >
+            <style
+              dangerouslySetInnerHTML={{
+                __html: `
+
+              .spon-link {
+                transition: all .2s ease;
+                transform: translate(-50%, -50%);
+              }
+
+              .spon-link:hover {
+                z-index: 10;
+                transform: translate(-50%, -50%) scale(1.1);
+              }
+
+              .spon-link:hover .spon-tooltip {
+                opacity: 1;
+              }
+            `,
+              }}
+            />
+            <Pack root={root} size={[width, height]} padding={width * 0.005}>
+              {packData => {
+                const circles = packData.descendants().slice(1) // skip first layer
+                return (
+                  <div>
+                    {[...circles].reverse().map((circle, i) => (
+                      <a
+                        key={`circle-${i}`}
+                        href={
+                          circle.data.linkUrl ||
+                          `https://github.com/${circle.data.login}`
+                        }
+                        className="spon-link absolute shadow-lg bg-white rounded-full z-0"
+                        style={{
+                          left: circle.x,
+                          top: circle.y,
+                          width: circle.r * 2,
+                          height: circle.r * 2,
+                        }}
+                      >
+                        <div
+                          key={`circle-${i}`}
+                          className="absolute bg-no-repeat bg-center bg-contain rounded-full"
+                          style={{
+                            position: 'absolute',
+                            left: '50%',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: '90%',
+                            height: '90%',
+                            backgroundImage: `url(${
+                              circle.data.imageUrl ||
+                              `https://avatars0.githubusercontent.com/${circle.data.login}?v=3&s=200`
+                            })`,
+                          }}
+                        />
+                        {circle.data.name ? (
+                          <div
+                            className="spon-tooltip absolute -top-0 left-1/2
+                          text-sm
+                          bg-gray-900 text-white p-2 pointer-events-none
+                          transform -translate-x-1/2 -translate-y-full opacity-0
+                          shadow-xl rounded-lg"
+                          >
+                            <span className="whitespace-no-wrap">
+                              {circle.data.name}
+                            </span>
+                          </div>
+                        ) : null}
+                      </a>
+                    ))}
+                  </div>
+                )
+              }}
+            </Pack>
+          </div>
+        )
+      }}
+    </ParentSize>
+  )
+}
diff --git a/docs/src/pages/comparison.md b/docs/src/pages/comparison.md
index d0a16f85c..34ca529ca 100644
--- a/docs/src/pages/comparison.md
+++ b/docs/src/pages/comparison.md
@@ -12,51 +12,52 @@ Feature/Capability Key:
 - 🔶 Supported and documented, but requires extra user-code to implement
 - 🛑 Not officially supported or documented.
 
-|                                                    | React Query                            | SWR [_(Website)_][swr]     | Apollo Client [_(Website)_][apollo]   | RTK-Query [_(Website)_][rtk-query]                          |
-| -------------------------------------------------- | -------------------------------------- | -------------------------- | ------------------------------------- | ----------------------------------------------------------- |
-| Platform Requirements                              | React                                  | React                      | React, GraphQL                        | Redux                                                       |
-| Their Comparison                                   |                                        | (none)                     | (none)                                | [Comparison][rtk-query-comparison]                          |
-| Supported Query Syntax                             | Promise, REST, GraphQL                 | Promise, REST, GraphQL     | GraphQL                               | Promise, REST, GraphQL                                      |
-| Supported Frameworks                               | React                                  | React                      | React + Others                        | Any                                                         |
-| Supported Query Keys                               | JSON                                   | JSON                       | GraphQL Query                         | JSON                                                        |
-| Query Key Change Detection                         | Deep Compare (Stable Serialization)    | Referential Equality (===) | Deep Compare (Unstable Serialization) | Referential Equality (===)                                  |
-| Query Data Memoization Level                       | Query + Structural Sharing             | Query                      | Query + Entity + Structural Sharing   | Query                                                       |
-| Bundle Size                                        | [![][bp-react-query]][bpl-react-query] | [![][bp-swr]][bpl-swr]     | [![][bp-apollo]][bpl-apollo]          | [![][bp-rtk]][bpl-rtk] + [![][bp-rtk-query]][bpl-rtk-query] |
-| API Definition                                     | On-Use, Declarative                    | On-Use                     | GraphQL Schema                        | Declarative                                                 |
-| Queries                                            | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Caching                                            | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Devtools                                           | ✅                                     | 🟡                         | ✅                                    | ✅                                                          |
-| Polling/Intervals                                  | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Parallel Queries                                   | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Dependent Queries                                  | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Paginated Queries                                  | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Infinite Queries                                   | ✅                                     | ✅                         | ✅                                    | 🛑                                                          |
-| Bi-directional Infinite Queries                    | ✅                                     | 🔶                         | 🔶                                    | 🛑                                                          |
-| Infinite Query Refetching                          | ✅                                     | ✅                         | 🛑                                    | 🛑                                                          |
-| Lagged Query Data<sup>1</sup>                      | ✅                                     | 🛑                         | 🛑                                    | ✅                                                          |
-| Selectors                                          | ✅                                     | 🛑                         | ✅                                    | ✅                                                          |
-| Initial Data                                       | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Scroll Recovery                                    | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Cache Manipulation                                 | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Outdated Query Dismissal                           | ✅                                     | ✅                         | ✅                                    | ✅                                                          |
-| Render Optimization<sup>2</sup>                    | ✅                                     | 🛑                         | 🛑                                    | ✅                                                          |
-| Auto Garbage Collection                            | ✅                                     | 🛑                         | 🛑                                    | ✅                                                          |
-| Mutation Hooks                                     | ✅                                     | 🟡                         | ✅                                    | ✅                                                          |
-| Offline Mutation Support                           | ✅                                     | 🛑                         | 🟡                                    | 🛑                                                          |
-| Prefetching APIs                                   | ✅                                     | 🔶                         | ✅                                    | ✅                                                          |
-| Query Cancellation                                 | ✅                                     | 🛑                         | 🛑                                    | 🛑                                                          |
-| Partial Query Matching<sup>3</sup>                 | ✅                                     | 🛑                         | 🛑                                    | ✅                                                          |
-| Stale While Revalidate                             | ✅                                     | ✅                         | 🛑                                    | ✅                                                          |
-| Stale Time Configuration                           | ✅                                     | 🛑                         | 🛑                                    | 🛑                                                          |
-| Pre-usage Query/Mutation Configuration<sup>4</sup> | ✅                                     | 🛑                         | 🛑                                    | ✅                                                          |
-| Window Focus Refetching                            | ✅                                     | ✅                         | 🛑                                    | 🛑                                                          |
-| Network Status Refetching                          | ✅                                     | ✅                         | ✅                                    | 🛑                                                          |
-| General Cache Dehydration/Rehydration              | ✅                                     | 🛑                         | ✅                                    | ✅                                                          |
-| Offline Caching                                    | ✅ (Experimental)                      | 🛑                         | ✅                                    | 🔶                                                          |
-| React Suspense (Experimental)                      | ✅                                     | ✅                         | 🛑                                    | 🛑                                                          |
-| Abstracted/Agnostic Core                           | ✅                                     | 🛑                         | ✅                                    | ✅                                                          |
-| Automatic Refetch after Mutation<sup>5</sup>       | 🔶                                     | 🔶                         | ✅                                    | ✅                                                          |
-| Normalized Caching<sup>6</sup>                     | 🛑                                     | 🛑                         | ✅                                    | 🛑                                                          |
+|                                                    | React Query                              | SWR [_(Website)_][swr]     | Apollo Client [_(Website)_][apollo]   | RTK-Query [_(Website)_][rtk-query]   |
+| -------------------------------------------------- | ---------------------------------------- | -------------------------- | ------------------------------------- | ------------------------------------ |
+| Github Repo / Stars                                | [![][stars-react-query]][gh-react-query] | [![][stars-swr]][gh-swr]   | [![][stars-apollo]][gh-apollo]        | [![][stars-rtk-query]][gh-rtk-query] |
+| Platform Requirements                              | React                                    | React                      | React, GraphQL                        | Redux                                |
+| Their Comparison                                   |                                          | (none)                     | (none)                                | [Comparison][rtk-query-comparison]   |
+| Supported Query Syntax                             | Promise, REST, GraphQL                   | Promise, REST, GraphQL     | GraphQL                               | Promise, REST, GraphQL               |
+| Supported Frameworks                               | React                                    | React                      | React + Others                        | Any                                  |
+| Supported Query Keys                               | JSON                                     | JSON                       | GraphQL Query                         | JSON                                 |
+| Query Key Change Detection                         | Deep Compare (Stable Serialization)      | Referential Equality (===) | Deep Compare (Unstable Serialization) | Referential Equality (===)           |
+| Query Data Memoization Level                       | Query + Structural Sharing               | Query                      | Query + Entity + Structural Sharing   | Query                                |
+| Bundle Size                                        | [![][bp-react-query]][bpl-react-query]   | [![][bp-swr]][bpl-swr]     | [![][bp-apollo]][bpl-apollo]          | [![][bp-rtk-query]][bpl-rtk-query]   |
+| API Definition                                     | On-Use, Declarative                      | On-Use                     | GraphQL Schema                        | Declarative                          |
+| Queries                                            | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Caching                                            | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Devtools                                           | ✅                                       | 🟡                         | ✅                                    | ✅                                   |
+| Polling/Intervals                                  | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Parallel Queries                                   | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Dependent Queries                                  | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Paginated Queries                                  | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Infinite Queries                                   | ✅                                       | ✅                         | ✅                                    | 🛑                                   |
+| Bi-directional Infinite Queries                    | ✅                                       | 🔶                         | 🔶                                    | 🛑                                   |
+| Infinite Query Refetching                          | ✅                                       | ✅                         | 🛑                                    | 🛑                                   |
+| Lagged Query Data<sup>1</sup>                      | ✅                                       | 🛑                         | 🛑                                    | ✅                                   |
+| Selectors                                          | ✅                                       | 🛑                         | ✅                                    | ✅                                   |
+| Initial Data                                       | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Scroll Recovery                                    | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Cache Manipulation                                 | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Outdated Query Dismissal                           | ✅                                       | ✅                         | ✅                                    | ✅                                   |
+| Render Optimization<sup>2</sup>                    | ✅                                       | 🛑                         | 🛑                                    | ✅                                   |
+| Auto Garbage Collection                            | ✅                                       | 🛑                         | 🛑                                    | ✅                                   |
+| Mutation Hooks                                     | ✅                                       | 🟡                         | ✅                                    | ✅                                   |
+| Offline Mutation Support                           | ✅                                       | 🛑                         | 🟡                                    | 🛑                                   |
+| Prefetching APIs                                   | ✅                                       | 🔶                         | ✅                                    | ✅                                   |
+| Query Cancellation                                 | ✅                                       | 🛑                         | 🛑                                    | 🛑                                   |
+| Partial Query Matching<sup>3</sup>                 | ✅                                       | 🛑                         | 🛑                                    | ✅                                   |
+| Stale While Revalidate                             | ✅                                       | ✅                         | 🛑                                    | ✅                                   |
+| Stale Time Configuration                           | ✅                                       | 🛑                         | 🛑                                    | 🛑                                   |
+| Pre-usage Query/Mutation Configuration<sup>4</sup> | ✅                                       | 🛑                         | 🛑                                    | ✅                                   |
+| Window Focus Refetching                            | ✅                                       | ✅                         | 🛑                                    | 🛑                                   |
+| Network Status Refetching                          | ✅                                       | ✅                         | ✅                                    | 🛑                                   |
+| General Cache Dehydration/Rehydration              | ✅                                       | 🛑                         | ✅                                    | ✅                                   |
+| Offline Caching                                    | ✅ (Experimental)                        | 🛑                         | ✅                                    | 🔶                                   |
+| React Suspense (Experimental)                      | ✅                                       | ✅                         | 🛑                                    | 🛑                                   |
+| Abstracted/Agnostic Core                           | ✅                                       | 🛑                         | ✅                                    | ✅                                   |
+| Automatic Refetch after Mutation<sup>5</sup>       | 🔶                                       | 🔶                         | ✅                                    | ✅                                   |
+| Normalized Caching<sup>6</sup>                     | 🛑                                       | 🛑                         | ✅                                    | 🛑                                   |
 
 ### Notes
 
@@ -75,25 +76,33 @@ Feature/Capability Key:
 <!-- -->
 
 [bpl-react-query]: https://bundlephobia.com/result?p=react-query
-[bp-react-query]: https://badgen.net/bundlephobia/minzip/react-query?label=%20
+[bp-react-query]: https://badgen.net/bundlephobia/minzip/react-query?label=💾
+[gh-react-query]: https://github.com/tannerlinsley/react-query
+[stars-react-query]: https://img.shields.io/github/stars/tannerlinsley/react-query?label=%F0%9F%8C%9F
 
 <!-- -->
 
 [swr]: https://github.com/vercel/swr
-[bp-swr]: https://badgen.net/bundlephobia/minzip/swr?label=%20
+[bp-swr]: https://badgen.net/bundlephobia/minzip/swr?label=💾
+[gh-swr]: https://github.com/vercel/swr
+[stars-swr]: https://img.shields.io/github/stars/vercel/swr?label=%F0%9F%8C%9F
 [bpl-swr]: https://bundlephobia.com/result?p=swr
 
 <!-- -->
 
 [apollo]: https://github.com/apollographql/apollo-client
-[bp-apollo]: https://badgen.net/bundlephobia/minzip/@apollo/client?label=%20
+[bp-apollo]: https://badgen.net/bundlephobia/minzip/@apollo/client?label=💾
+[gh-apollo]: https://github.com/apollographql/apollo-client
+[stars-apollo]: https://img.shields.io/github/stars/apollographql/apollo-client?label=%F0%9F%8C%9F
 [bpl-apollo]: https://bundlephobia.com/result?p=@apollo/client
 
 <!-- -->
 
 [rtk-query]: https://rtk-query-docs.netlify.app/
 [rtk-query-comparison]: https://rtk-query-docs.netlify.app/introduction/comparison
-[bp-rtk]: https://badgen.net/bundlephobia/minzip/@reduxjs/toolkit?label=%20
-[bp-rtk-query]: https://badgen.net/bundlephobia/minzip/@rtk-incubator/rtk-query?label=%20
+[bp-rtk]: https://badgen.net/bundlephobia/minzip/@reduxjs/toolkit?label=💾
+[bp-rtk-query]: https://badgen.net/bundlephobia/minzip/@rtk-incubator/rtk-query?label=💾
+[gh-rtk-query]: https://github.com/rtk-incubator/rtk-query
+[stars-rtk-query]: https://img.shields.io/github/stars/rtk-incubator/rtk-query?label=%F0%9F%8C%9F
 [bpl-rtk]: https://bundlephobia.com/result?p=@reduxjs/toolkit
 [bpl-rtk-query]: https://bundlephobia.com/result?p=@rtk-incubator/rtk-query
diff --git a/docs/src/pages/guides/mutations.md b/docs/src/pages/guides/mutations.md
index e05adfdcc..f593d82f8 100644
--- a/docs/src/pages/guides/mutations.md
+++ b/docs/src/pages/guides/mutations.md
@@ -216,7 +216,7 @@ const queryClient = new QueryClient()
 // Define the "addTodo" mutation
 queryClient.setMutationDefaults('addTodo', {
   mutationFn: addTodo,
-  onMutate: variables => {
+  onMutate: async (variables) => {
     // Cancel current queries for the todos list
     await queryClient.cancelQueries('todos')
 
diff --git a/docs/src/pages/guides/query-functions.md b/docs/src/pages/guides/query-functions.md
index 373abcf6d..a7a5fbc68 100644
--- a/docs/src/pages/guides/query-functions.md
+++ b/docs/src/pages/guides/query-functions.md
@@ -49,7 +49,7 @@ useQuery(['todos', todoId], async () => {
 Query keys are not just for uniquely identifying the data you are fetching, but are also conveniently passed into your query function and while not always necessary, this makes it possible to extract your query functions if needed:
 
 ```js
-function Todos({ completed }) {
+function Todos({ status, page }) {
   const result = useQuery(['todos', { status, page }], fetchTodoList)
 }
 
diff --git a/docs/src/pages/guides/query-keys.md b/docs/src/pages/guides/query-keys.md
index 1b9b01113..cfe60525b 100644
--- a/docs/src/pages/guides/query-keys.md
+++ b/docs/src/pages/guides/query-keys.md
@@ -66,7 +66,7 @@ useQuery(['todos', undefined, page, status], ...)
 Since query keys uniquely describe the data they are fetching, they should include any variables you use in your query function that **change**. For example:
 
 ```js
-function Todos({ completed }) {
+function Todos({ todoId }) {
   const result = useQuery(['todos', todoId], () => fetchTodoById(todoId))
 }
 ```
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 9284986cf..ac6a1896e 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -1,56 +1,34 @@
 import * as React from 'react'
-import { Banner } from 'components/Banner'
-import { Sticky } from 'components/Sticky'
-import { Nav } from 'components/Nav'
-import { siteConfig } from 'siteConfig'
-import Link from 'next/link'
-import { Footer } from 'components/Footer'
-import { ClientsMarquee } from 'components/clients/ClientsMarquee'
-import { Seo } from 'components/Seo'
+import axios from 'axios'
 import Head from 'next/head'
+import Link from 'next/link'
+
+//
+import { siteConfig } from '../siteConfig'
 
-const supporters = [
-  ['Kent C. Dodds', 'https://kentcdodds.com/'],
-  ['@bgazzera', 'https://github.com/bgazzera'],
-  ['Gabe Ragland', 'https://github.com/gragland'],
-  ['Matt Wood', 'https://github.com/mattwoodnyc'],
-  ['Joshua Turner', 'https://github.com/joshua-turner'],
-  ['Fillip Peyton', 'https://github.com/fillippeyton'],
-  ['Tim Myers', 'https://github.com/denvercoder'],
-  ['Andy Slezak', 'https://github.com/amslezak'],
-  ['Shane Cavaliere', 'https://github.com/shanecav'],
-]
+import { Banner } from '../components/Banner'
+import { Sticky } from '../components/Sticky'
+import { Nav } from '../components/Nav'
+import { Footer } from '../components/Footer'
+import { ClientsMarquee } from '../components/clients/ClientsMarquee'
+import { Seo } from '../components/Seo'
+import SponsorPack from '../components/SponsorPack'
 
-const fans = [
-  `Steven Miyakawa (@SamSamskies)`,
-  `Alex Trost (@a-trost)`,
-  `Andrey (@andreyvital)`,
-  'Anoop (@Anoupz)',
-  'Daniel Almaguer (@deini)',
-  'Chris Vaszauskas (@chrisvasz)',
-  'Christian Rudh (@crudh)',
-  'Vianney Carel (@vcarel)',
-  'Freddie (@fdjones)',
-  'Johnny Bell (@johnnyxbell)',
-  'Garrett Fritz (@gfritzdev)',
-  'Juliano Farias (@frontendwizard)',
-  'Peter Pistorius (@peterp)',
-  'Agustín Villalobos (@agustin-v)',
-  'Panigo (@rangigo)',
-  'Jesse Jafa, (@awareness481)',
-  'Arijit Bhattacharya, (@hoodwink73)',
-  'Bryan Grill, (@brygrill)',
-  'Peter Hozák, (@Aprillion)',
-  'Arijit Bhattacharya, (@hoodwink73)',
-  'Jonathan Chang, (@jdkschang)',
-  'Ash Connell, (@ashconnell)',
-  'Sara Bee, (@doeg)',
-  'Mihir Kedia (@meitros)',
-  'Nick Quebbeman (@kidqueb)',
-  'Greg Lin (@glin)',
-]
+export const getStaticProps = async () => {
+  const {
+    data: { sponsors, tiers },
+  } = await axios.get('https://tanstack.com/api/github-sponsors')
 
-const Home = () => {
+  return {
+    props: {
+      sponsors,
+      tiers,
+    },
+    revalidate: 60, // In seconds
+  }
+}
+
+const Home = ({ sponsors }) => {
   return (
     <>
       <Seo
@@ -189,35 +167,35 @@ const Home = () => {
                 ENROLL NOW
               </a>
               <div className="grid pt-8 text-white max-w-screen-lg mx-auto text-lg">
-                <a className="mb-2">
+                <span className="mb-2">
                   <span className="bg-coral text-gray-800 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
                     <Check />
                   </span>
                   50+ Lessons
-                </a>
-                <a className="mb-2">
+                </span>
+                <span className="mb-2">
                   <span className="bg-coral text-gray-800 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
                     <Check />
                   </span>
                   3+ Hours of Live-Code Training
-                </a>
-                <a className="mb-2">
+                </span>
+                <span className="mb-2">
                   <span className="bg-coral text-gray-800 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
                     <Check />
                   </span>
                   Lesson Source Code
-                </a>
-                <a className="mb-2">
+                </span>
+                <span className="mb-2">
                   <span className="bg-coral text-gray-800 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
                     <Check />
                   </span>
                   Full API coverage
-                </a>
+                </span>
               </div>
             </div>
           </div>
         </div>
-        <div className="relative text-lg border-t border-gray-200 bg-white overflow-hidden">
+        <div className="relative text-lg border-t border-gray-200 bg-gray-100 overflow-hidden">
           <div className="lg:block lg:absolute lg:inset-0">
             <svg
               className="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2"
@@ -240,7 +218,7 @@ const Home = () => {
                     y="0"
                     width="4"
                     height="4"
-                    className="text-gray-100"
+                    className="text-gray-200"
                     fill="currentColor"
                   />
                 </pattern>
@@ -253,95 +231,19 @@ const Home = () => {
               />
             </svg>
           </div>
-          <div className="py-12 relative">
-            <div className="uppercase tracking-wider text-4xl font-semibold text-center text-gray-500 m-6">
-              Diamond Sponsors
-            </div>
-
-            <a
-              href="https://github.com/sponsors/tannerlinsley"
-              target="_blank"
-              className="opacity-50 font-bold w-56 h-56 m-auto bg-gray-200 rounded-full flex items-center justify-center text-sm text-gray-500 border-4 border-transparent hover:border-green-500 hover:text-green-500 transition duration-200 ease-out hover:opacity-100"
-            >
-              Become a Sponsor
-            </a>
-
-            <div className="grid grid-cols-1 lg:grid-cols-3">
-              <div className="mt-10">
-                <div className="uppercase tracking-wider text-3xl font-semibold text-center text-gray-500 mt-10 m-6">
-                  Gold Sponsors
-                </div>
-                <a
-                  href="https://github.com/sponsors/tannerlinsley"
-                  target="_blank"
-                  className="opacity-50 font-bold w-48 h-48 m-auto bg-gray-200 rounded-full flex items-center justify-center text-sm text-gray-500 border-4 border-transparent hover:border-green-500 hover:text-green-500 transition duration-200 ease-out hover:opacity-100"
-                >
-                  Become a Sponsor
-                </a>
-              </div>
-
-              <div className="mt-10">
-                <div className="uppercase tracking-wider text-3xl font-semibold text-center text-gray-500 mt-10 m-6">
-                  Silver Sponsors
-                </div>
-                <a
-                  href="https://www.reactbricks.com/"
-                  target="_blank"
-                  className="block w-56 m-auto"
-                >
-                  <img src="https://www.reactbricks.com/reactbricks_vertical.svg" />
-                </a>
-              </div>
-
-              <div className="mt-10">
-                <div className="uppercase tracking-wider text-3xl font-semibold text-center text-gray-500 mt-10 m-6">
-                  Bronze Sponsors
-                </div>
-                <a
-                  href="https://nozzle.io/"
-                  target="_blank"
-                  className="block w-48 m-auto"
-                >
-                  <img
-                    src="https://nozzle.io/img/logo-blue.png"
-                    alt="Nozzle - Google Keyword Rank Tracker"
-                  ></img>
-                </a>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2">
-              <div className="mt-10">
-                <div className="uppercase tracking-wider text-2xl font-semibold text-center text-gray-500 mt-10 m-3">
-                  Supporters
-                </div>
-                <ul className="list-none text-center">
-                  {supporters.map((supporter, i) => (
-                    <li className="font-bold text-blue-800" key={i}>
-                      <a href={supporter[1]}>{supporter[0]}</a>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              <div className="mt-10">
-                <div className="uppercase tracking-wider text-2xl font-semibold text-center text-gray-500 mt-10 m-3">
-                  Fans
-                </div>
-                <ul className="list-none text-center">
-                  {fans.map(fan => (
-                    <li key={fan}>{fan}</li>
-                  ))}
-                </ul>
-              </div>
+          <div className="relative">
+            <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+              Sponsors
+            </h3>
+            <div className="py-4 flex flex-wrap">
+              <SponsorPack sponsors={sponsors} height={700} />
             </div>
-            <div className="mt-10 text-center">
+            <div className="text-center mb-8">
               <a
                 href="https://github.com/sponsors/tannerlinsley"
-                target="_blank"
-                className="text-lg font-bold inline-flex items-center justify-center px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-full text-white bg-green-500 hover:bg-green-500-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
+                className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
               >
-                Become a Sponsor
+                Become a Sponsor!
               </a>
             </div>
           </div>
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 0c0766c35..0704614dd 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1742,11 +1742,21 @@
   resolved "https://registry.yarnpkg.com/@types/async-retry/-/async-retry-1.2.1.tgz#fa9ac165907a8ee78f4924f4e393b656c65b5bb4"
   integrity sha512-yMQ6CVgICWtyFNBqJT3zqOc+TnqqEPLo4nKJNPFwcialiylil38Ie6q1ENeFTjvaLOkVim9K5LisHgAKJWidGQ==
 
+"@types/classnames@^2.2.9":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
+  integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/d3-hierarchy@^1.1.6":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-1.1.7.tgz#14a57b0539f8929015f8ad96490de50a16211040"
+  integrity sha512-fvht6DOYKzqmXjMb/+xfgkmrWM4SD7rMA/ZbM+gGwr9ZTuIDfky95J8CARtaJo/ExeWyS0xGVdL2gqno2zrQ0Q==
+
 "@types/glob@^7.1.1":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.2.tgz#06ca26521353a545d94a0adc74f38a59d232c987"
@@ -1767,6 +1777,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
   integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
 
+"@types/lodash@^4.14.146":
+  version "4.14.167"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.167.tgz#ce7d78553e3c886d4ea643c37ec7edc20f16765e"
+  integrity sha512-w7tQPjARrvdeBkX/Rwg95S592JwxqOjmms3zWQ0XZgSyxSLdzWaYH3vErBhdVS/lRBX7F8aBYcYJYTr5TMGOzw==
+
 "@types/lru-cache@4.1.1":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-4.1.1.tgz#b2d87a5e3df8d4b18ca426c5105cd701c2306d40"
@@ -1804,11 +1819,58 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
   integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/react@*":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
+"@visx/group@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@visx/group/-/group-1.0.0.tgz#d47ac94abec1d191602a501a4fdf7455dfaad0be"
+  integrity sha512-2YlhGHTINUl7do046p/bkIYiD4xDv/sJ4JAaGrqFXwX68EJZ5Er/0gpZZ4nrADQlxB8/uyJvZzp1Q54ySfTMiA==
+  dependencies:
+    "@types/classnames" "^2.2.9"
+    "@types/react" "*"
+    classnames "^2.2.5"
+    prop-types "^15.6.2"
+
+"@visx/hierarchy@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@visx/hierarchy/-/hierarchy-1.0.0.tgz#730aa053121180dafe139ac5b093571baf3d26c6"
+  integrity sha512-kT8RBebsbuN6zn+LaBhQEG+xVKd5IJki3kn0fki4pPHbJTaSMdNYUJicPtsKnWyRqxAuNQfKdKaKJfam4iNTtA==
+  dependencies:
+    "@types/classnames" "^2.2.9"
+    "@types/d3-hierarchy" "^1.1.6"
+    "@types/react" "*"
+    "@visx/group" "1.0.0"
+    classnames "^2.2.5"
+    d3-hierarchy "^1.1.4"
+    prop-types "^15.6.1"
+
+"@visx/responsive@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@visx/responsive/-/responsive-1.3.0.tgz#4df0c9d9e2f72ac36e4e1c895b4624626209cca3"
+  integrity sha512-RMfpjdnHKyhB/bb2i6x/vfQeYzfz+pJc3VUK+dP88lXXTkqv1O/NYIkXk2sWk6QhDw5muChHFmnZ1L8TnIOMXg==
+  dependencies:
+    "@types/lodash" "^4.14.146"
+    "@types/react" "*"
+    lodash "^4.17.10"
+    prop-types "^15.6.1"
+    resize-observer-polyfill "1.5.1"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -2405,6 +2467,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
   integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-plugin-apply-mdx-type-prop@1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.18.tgz#81f31b472f3b28289d4cea0f76c0315e6b85394f"
@@ -3053,7 +3122,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.6, classnames@^2.2.6:
+classnames@2.2.6, classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -3531,6 +3600,11 @@ cssnano-simple@1.2.0:
     cssnano-preset-simple "1.2.0"
     postcss "^7.0.32"
 
+csstype@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
+  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -3552,6 +3626,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d3-hierarchy@^1.1.4:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz#2f6bee24caaea43f8dc37545fa01628559647a83"
+  integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -4471,6 +4550,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.10.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
+  integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -5872,16 +5956,16 @@ lodash.uniq@4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash@^4.17.10, lodash@^4.17.19, lodash@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
 lodash@^4.17.11, lodash@^4.17.13:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.17.19, lodash@^4.17.20:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-
 logalot@^2.0.0, logalot@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/logalot/-/logalot-2.1.0.tgz#5f8e8c90d304edf12530951a5554abb8c5e3f552"
@@ -7495,7 +7579,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.2:
+prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8098,6 +8182,11 @@ request@^2.87.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
+resize-observer-polyfill@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
diff --git a/src/core/query.ts b/src/core/query.ts
index f832748d9..0dd52ed47 100644
--- a/src/core/query.ts
+++ b/src/core/query.ts
@@ -464,18 +464,18 @@ export class Query<
 
     const hasInitialData = typeof options.initialData !== 'undefined'
 
-    const initialDataUpdatedAt =
-      hasInitialData &&
-      (typeof options.initialDataUpdatedAt === 'function'
+    const initialDataUpdatedAt = hasInitialData
+      ? typeof options.initialDataUpdatedAt === 'function'
         ? (options.initialDataUpdatedAt as () => number | undefined)()
-        : options.initialDataUpdatedAt)
+        : options.initialDataUpdatedAt
+      : 0
 
     const hasData = typeof data !== 'undefined'
 
     return {
       data,
       dataUpdateCount: 0,
-      dataUpdatedAt: hasData ? initialDataUpdatedAt || Date.now() : 0,
+      dataUpdatedAt: hasData ? initialDataUpdatedAt ?? Date.now() : 0,
       error: null,
       errorUpdateCount: 0,
       errorUpdatedAt: 0,
diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
index 6b7a6867c..83f55d23e 100644
--- a/src/devtools/devtools.tsx
+++ b/src/devtools/devtools.tsx
@@ -221,6 +221,7 @@ export function ReactQueryDevtools({
         />
         {isResolvedOpen ? (
           <Button
+            type="button"
             {...otherCloseButtonProps}
             onClick={() => {
               setIsOpen(false)
@@ -255,6 +256,7 @@ export function ReactQueryDevtools({
       </ThemeProvider>
       {!isResolvedOpen ? (
         <button
+          type="button"
           {...otherToggleButtonProps}
           aria-label="Open React Query Devtools"
           onClick={() => {
@@ -537,6 +539,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                         ))}
                       </Select>
                       <Button
+                        type="button"
                         onClick={() => setSortDesc(old => !old)}
                         style={{
                           padding: '.3rem .4rem',
@@ -702,6 +705,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                 }}
               >
                 <Button
+                  type="button"
                   onClick={() => activeQuery.fetch()}
                   disabled={activeQuery.state.isFetching}
                   style={{
@@ -711,6 +715,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   Refetch
                 </Button>{' '}
                 <Button
+                  type="button"
                   onClick={() => queryClient.invalidateQueries(activeQuery)}
                   style={{
                     background: theme.warning,
@@ -720,6 +725,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   Invalidate
                 </Button>{' '}
                 <Button
+                  type="button"
                   onClick={() => queryClient.resetQueries(activeQuery)}
                   style={{
                     background: theme.gray,
@@ -728,6 +734,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   Reset
                 </Button>{' '}
                 <Button
+                  type="button"
                   onClick={() => queryClient.removeQueries(activeQuery)}
                   style={{
                     background: theme.danger,


Test patch:
diff --git a/src/react/tests/useQuery.test.tsx b/src/react/tests/useQuery.test.tsx
index abed72a63..cd879164c 100644
--- a/src/react/tests/useQuery.test.tsx
+++ b/src/react/tests/useQuery.test.tsx
@@ -2107,6 +2107,37 @@ describe('useQuery', () => {
     })
   })
 
+  it('should fetch if "initial data updated at" is exactly 0', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<string>[] = []
+
+    function Page() {
+      const state = useQuery(key, () => 'data', {
+        staleTime: 10 * 1000, // 10 seconds
+        initialData: 'initial',
+        initialDataUpdatedAt: 0,
+      })
+      states.push(state)
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(100)
+
+    expect(states.length).toBe(2)
+    expect(states[0]).toMatchObject({
+      data: 'initial',
+      isStale: true,
+      isFetching: true,
+    })
+    expect(states[1]).toMatchObject({
+      data: 'data',
+      isStale: false,
+      isFetching: false,
+    })
+  })
+
   it('should keep initial data when the query key changes', async () => {
     const key = queryKey()
     const states: UseQueryResult<{ count: number }>[] = []