Merge branch 'master' of https://github.com/tannerlinsley/react-query

Author: tannerlinsley

docs/src/manifests/manifest.json

@@ -246,6 +246,11 @@
           "path": "/examples/optimistic-updates",
           "editUrl": "/examples/optimistic-updates.mdx"
         },
+        {
+          "title": "Optimistic Updates in TypeScript",
+          "path": "/examples/optimistic-updates-typescript",
+          "editUrl": "/examples/optimistic-updates-typescript.mdx"
+        },
         {
           "title": "Pagination",
           "path": "/examples/pagination",

docs/src/pages/examples/optimistic-updates-typescript.mdx

@@ -0,0 +1,23 @@
+---
+id: optimistic-updates-typescript
+title: Optimistic Updates in TypeScript
+toc: false
+---
+
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/optimistic-updates-typescript)
+- [View Source](https://github.com/tannerlinsley/react-query/tree/master/examples/optimistic-updates-typescript)
+
+<iframe
+  src="https://codesandbox.io/embed/github/tannerlinsley/react-query/tree/master/examples/optimistic-updates-typescript?autoresize=1&fontsize=14&module=%2Fpages%2Findex.tsx&theme=dark"
+  title="tannerlinsley/react-query: optimistic-updates-typescript"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  style={{
+    width: '100%',
+    height: '80vh',
+    border: '0',
+    borderRadius: 8,
+    overflow: 'hidden',
+    position: 'static',
+    zIndex: 0,
+  }}
+></iframe>

docs/src/pages/guides/query-cancellation.md

@@ -58,7 +58,7 @@ const query = useQuery('todos', () => {
 
 ## Manual Cancellation
 
-You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `cache.cancelQueries(key)`. If `promise.cancel` is available, React Query will cancel the request.
+You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `queryClient.cancelQueries(key)`. If `promise.cancel` is available, React Query will cancel the request.
 
 ```js
 const [queryKey] = useState('todos')
@@ -78,12 +78,12 @@ const query = useQuery(queryKey, () => {
   return promise
 })
 
-const cache = useQueryCache();
+const queryClient = useQueryClient();
 
 return (
   <button onClick={(e) => {
     e.preventDefault();
-    cache.cancelQueries(queryKey);
+    queryClient.cancelQueries(queryKey);
    }}>Cancel</button>
 )
 ```

examples/optimistic-updates-typescript/package.json

@@ -4,13 +4,14 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "@types/react": "^17.0.0",
+    "@types/node": "14.14.14",
     "axios": "^0.19.2",
     "isomorphic-unfetch": "3.0.0",
     "next": "9.2.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-query": "^3.2.0-beta.32",
-    "react-query-devtools": "^3.0.0-beta.1",
+    "react-query": "3.5.1",
     "typescript": "^4.1.2"
   },
   "scripts": {

examples/optimistic-updates-typescript/pages/index.tsx

@@ -9,20 +9,10 @@ import {
   QueryClientProvider,
   UseQueryOptions,
 } from 'react-query'
-import { ReactQueryDevtools } from 'react-query-devtools'
+import { ReactQueryDevtools } from 'react-query/devtools'
 
 const client = new QueryClient()
 
-export default function App() {
-  return (
-    <QueryClientProvider client={client}>
-      <Example />
-      <TodoCounter />
-      <ReactQueryDevtools initialIsOpen />
-    </QueryClientProvider>
-  )
-}
-
 type Todos = {
   items: readonly {
     id: string
@@ -37,7 +27,7 @@ async function fetchTodos(): Promise<Todos> {
 }
 
 function useTodos<TData = Todos>(
-  options?: UseQueryOptions<TData, AxiosError, Todos>
+  options?: UseQueryOptions<Todos, AxiosError, TData>
 ) {
   return useQuery('todos', fetchTodos, options)
 }
@@ -143,3 +133,13 @@ function Example() {
     </div>
   )
 }
+
+export default function App() {
+  return (
+    <QueryClientProvider client={client}>
+      <Example />
+      <TodoCounter />
+      <ReactQueryDevtools initialIsOpen />
+    </QueryClientProvider>
+  )
+}

src/devtools/devtools.tsx

@@ -703,6 +703,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   onClick={() => queryClient.invalidateQueries(activeQuery)}
                   style={{
                     background: theme.warning,
+                    color: theme.inputTextColor,
                   }}
                 >
                   Invalidate