v3

.eslintrc

@@ -1,9 +1,10 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "import"],
   "extends": [
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
     "react-app",
     "prettier"
   ],
@@ -26,6 +27,10 @@
         "ignoreParameters": true
       }
     ],
-    "no-shadow": "error"
+    "no-shadow": "error",
+    "import/no-cycle": "error",
+    "import/no-unresolved": "error",
+    "import/no-unused-modules": ["off", { "unusedExports": true }],
+    "no-redeclare": "off"
   }
 }

.github/workflows/test-and-publish.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - 'master'
-      - 'next'
+      - 'beta'
       - '1.x'
   pull_request:
 
@@ -38,7 +38,7 @@ jobs:
           registry-url: https://registry.npmjs.org/
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
-      - run: yarn build && yarn build:types
+      - run: yarn build
       - run: npx semantic-release@17
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -5,13 +5,15 @@
 node_modules
 
 # builds
+types
 build
 dist
 lib
 es
 artifacts
 .rpt2_cache
 coverage
+*.tgz
 
 # misc
 .DS_Store
@@ -31,5 +33,3 @@ stats-hydration.json
 stats-react.json
 stats.html
 .vscode/settings.json
-
-types

README.md

@@ -39,7 +39,7 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Tabl
 - Load-More + Infinite Scroll Queries w/ Scroll Recovery
 - Request Cancellation
 - [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) + Fetch-As-You-Render Query Prefetching
-- [Dedicated Devtools (React Query Devtools)](https://github.com/tannerlinsley/react-query-devtools)
+- [Dedicated Devtools
 - <a href="https://bundlephobia.com/result?p=react-query@latest" target="\_parent">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/react-query@latest" />
   </a> (depending on features imported)
@@ -80,4 +80,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
 
-<!-- Force 1 -->
+<!-- Force 2 -->

core/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../lib/core/index.js",
+  "module": "../es/core/index.js",
+  "types": "../types/core/index.d.ts"
+}

devtools/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../lib/devtools/index.js",
+  "module": "../es/devtools/index.js",
+  "types": "../types/devtools/index.d.ts"
+}

docs/next.config.js

@@ -37,28 +37,21 @@ const remarkPlugins = [
 module.exports = optimizedImages({
   pageExtensions: ['jsx', 'js', 'mdx', 'md'],
   env: {
-    GA_TRACKING_ID: process.env.GA_TRACKING_ID || '',
+    NEXT_PUBLIC_GA_TRACKING_ID: process.env.GA_TRACKING_ID || '',
     SENTRY_RELEASE: process.env.VERCEL_GITHUB_COMMIT_SHA || '',
   },
+  async redirects() {
+    return [
+      {
+        source: '/docs/:any*',
+        destination: '/:any*', // Matched parameters can be used in the destination
+        permanent: true,
+      },
+    ]
+  },
   experimental: {
     plugins: true,
     modern: true,
-    rewrites() {
-      return [
-        {
-          source: '/feed.xml',
-          destination: '/_next/static/feed.xml',
-        },
-        {
-          source: '/docs{/}?',
-          destination: '/docs/overview',
-        },
-        {
-          source: '/docs/tag/:tag{/}?',
-          destination: '/docs/tag/:tag/overview',
-        },
-      ]
-    },
   },
   webpack: (config, { dev, isServer, ...options }) => {
     config.module.rules.push({

docs/package.json

@@ -13,39 +13,39 @@
   "dependencies": {
     "@babel/preset-typescript": "^7.10.4",
     "@docsearch/react": "1.0.0-alpha.14",
-    "@mdx-js/loader": "^1.5.1",
-    "@mdx-js/mdx": "^1.5.1",
-    "@mdx-js/react": "^1.5.1",
+    "@mdx-js/loader": "^1.6.18",
+    "@mdx-js/mdx": "^1.6.18",
+    "@mdx-js/react": "^1.6.18",
     "@mdx-js/tag": "^0.20.3",
-    "@next/mdx": "^9.4.0",
-    "@next/plugin-google-analytics": "^9.4.4",
+    "@next/mdx": "^9.5.3",
+    "@next/plugin-google-analytics": "^9.5.3",
     "@reactions/component": "^2.0.2",
     "@zeit/fetch": "^6.0.0",
     "@zeit/react-jsx-parser": "^2.0.0",
     "async-sema": "^3.1.0",
-    "body-scroll-lock": "^3.0.1",
+    "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
-    "date-fns": "^2.12.0",
+    "date-fns": "^2.16.1",
     "docsearch.js": "^2.6.3",
     "framer-motion": "^1.11.1",
     "gray-matter": "^4.0.2",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-optipng": "^8.0.0",
     "intersection-observer": "^0.10.0",
     "isomorphic-unfetch": "^3.0.0",
-    "next": "^9.4.4",
-    "next-images": "^1.4.0",
-    "next-optimized-images": "^2.6.1",
-    "node-fetch": "^2.6.0",
-    "prismjs": "^1.20.0",
+    "next": "^9.5.3",
+    "next-images": "^1.5.0",
+    "next-optimized-images": "^2.6.2",
+    "node-fetch": "^2.6.1",
+    "prismjs": "^1.21.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-icons": "^3.9.0",
+    "react-icons": "^3.11.0",
     "react-live": "^2.2.2",
     "rehype-format": "^3.0.1",
     "rehype-stringify": "^7.0.0",
-    "remark": "^12.0.0",
+    "remark": "^12.0.1",
     "remark-autolink-headings": "^6.0.0",
     "remark-emoji": "^2.1.0",
     "remark-footnotes": "^1.0.0",
@@ -54,26 +54,26 @@
     "remark-slug": "^6.0.0",
     "remark-toc": "^7.0.0",
     "remark-unwrap-images": "^2.0.0",
-    "scroll-into-view-if-needed": "^2.2.24",
+    "scroll-into-view-if-needed": "^2.2.26",
     "semver-regex": "^3.1.1",
-    "unist-util-visit": "^2.0.2"
+    "unist-util-visit": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.4",
-    "@babel/core": "^7.10.4",
-    "@babel/plugin-transform-typescript": "^7.10.4",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-typescript": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@tailwindcss/ui": "^0.3.0",
     "algoliasearch": "3.35.1",
     "babel-preset-react-app": "^9.1.2",
     "dotenv-load": "^2.0.0",
     "github-slugger": "^1.3.0",
-    "md5": "^2.2.1",
+    "md5": "^2.3.0",
     "mdast-util-to-string": "^1.1.0",
     "postcss-preset-env": "^6.7.0",
-    "remark-parse": "^8.0.2",
-    "tailwindcss": "^1.4.6",
-    "unified": "^9.0.0",
+    "remark-parse": "^8.0.3",
+    "tailwindcss": "^1.8.10",
+    "unified": "^9.2.0",
     "webp-loader": "^0.6.0"
   },
   "engines": {

docs/src/components/DocsPageFooter.js

@@ -10,7 +10,10 @@ function areEqual(prevProps, props) {
 }
 
 export const DocsPageFooter = React.memo(({ route, prevRoute, nextRoute }) => {
-  const editUrl = `${siteConfig.editUrl}${route?.editUrl || route?.path}`
+  const editUrl =
+    route?.editUrl || route?.path
+      ? `${siteConfig.editUrl}${route?.editUrl || route?.path}`
+      : null
 
   return (
     <>
@@ -45,16 +48,18 @@ export const DocsPageFooter = React.memo(({ route, prevRoute, nextRoute }) => {
         </div>
       </div>
 
-      <div className="mb-8">
-        <a
-          href={editUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-gray-600 underline"
-        >
-          Edit this page on GitHub
-        </a>
-      </div>
+      {editUrl ? (
+        <div className="mb-8">
+          <a
+            href={editUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-600 underline"
+          >
+            Edit this page on GitHub
+          </a>
+        </div>
+      ) : null}
 
       <div className="py-8 md:flex md:items-center md:py-8 border-t border-b">
         <div className="font-semibold text-xl mr-4 text-center mb-4 md:mb-0  md:text-left">

docs/src/components/Footer.js

@@ -13,21 +13,21 @@ export const Footer = props => {
                 </h4>
                 <ul className="mt-4">
                   <li>
-                    <Link href="/docs/overview">
+                    <Link href="/overview">
                       <a className="text-base leading-6 text-gray-500 hover:text-gray-900">
                         Docs
                       </a>
                     </Link>
                   </li>
                   <li className="mt-4">
-                    <Link href="/docs/examples/simple">
+                    <Link href="/examples/simple">
                       <a className="text-base leading-6 text-gray-500 hover:text-gray-900">
                         Examples
                       </a>
                     </Link>
                   </li>
                   <li className="mt-4">
-                    <Link href="/docs/api">
+                    <Link href="/api/useQuery">
                       <a className="text-base leading-6 text-gray-500 hover:text-gray-900">
                         API Reference
                       </a>

docs/src/components/LayoutDocs.js

@@ -79,7 +79,6 @@ export const LayoutDocs = props => {
         />
         <div className="block">
           <>
-
             <div className="container mx-auto pb-12 pt-6 content">
               <div className="flex relative">
                 {!isMobile && (
@@ -89,7 +88,7 @@ export const LayoutDocs = props => {
                 )}
 
                 <div className={s['markdown'] + ' w-full docs'}>
-                  <h1>{props.meta.title}</h1>
+                  <h1 id="_top">{props.meta.title}</h1>
                   <MDXProvider components={MDXComponents}>
                     {props.children}
                   </MDXProvider>
@@ -107,11 +106,11 @@ export const LayoutDocs = props => {
                       width: 200,
                     }}
                   >
-                    <div className="sticky top-24 ">
+                    <div className="sticky top-24 overflow-y-auto">
                       <h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
                         On this page
                       </h4>
-                      <Toc />
+                      <Toc title={props.meta.title} />
                     </div>
                   </div>
                 )}

docs/src/components/Nav.js

@@ -24,12 +24,12 @@ export const Nav = () => (
         <div className="flex flex-grow items-center justify-between w-3/4 md:w-auto md:justify-end space-x-4 md:space-x-8 h-16">
           <div className="flex space-x-4 md:space-x-8 text-sm md:text-base">
             <div>
-              <Link href="/docs/overview">
+              <Link href="/overview">
                 <a className="leading-6 font-medium">Docs</a>
               </Link>
             </div>
             <div>
-              <Link href="/docs/examples/simple">
+              <Link href="/examples/simple">
                 <a className="leading-6 font-medium">Examples</a>
               </Link>
             </div>

docs/src/components/Toc.js

@@ -5,15 +5,12 @@ import styles from './Toc.module.css'
 const TOP_OFFSET = 100
 
 function getHeaderAnchors() {
-  return Array.prototype.filter.call(
-    document.getElementsByClassName('anchor'),
-    function (testElement) {
-      return (
-        testElement.parentNode.nodeName === 'H2' ||
-        testElement.parentNode.nodeName === 'H3'
-      )
-    }
-  )
+  return [
+    ...document.getElementsByTagName('H1'),
+    ...[...document.getElementsByClassName('anchor')].filter(
+      el => el.parentNode.nodeName === 'H2' || el.parentNode.nodeName === 'H3'
+    ),
+  ].filter(Boolean)
 }
 
 function getHeaderDataFromAnchors(el) {
@@ -24,7 +21,7 @@ function getHeaderDataFromAnchors(el) {
   }
 }
 
-export const Toc = () => {
+export const Toc = ({ title }) => {
   const headings = useTocHighlight(
     styles.contents__link,
     styles['contents__link--active'],
@@ -36,6 +33,11 @@ export const Toc = () => {
 
   return (
     <ul className="space-y-3">
+      <li className="text-sm">
+        <a className={styles.contents__link} href="#_top">
+          {title}
+        </a>
+      </li>
       {headings &&
         headings.length > 0 &&
         headings.map((h, i) =>