docs: typescript example docs (TanStack#1511)

* (docs): add typescript examples docs page

* (docs): fix typescript example

- eslint complains about use-before-defined
- added missing react types

* (docs): fix typescript example

- eslint complains about use-before-defined
- added missing react types

* (docs): add node types

* (docs): update react-query to the latest version in typescript example

* (docs): add typescript example to navigation

* (docs): make the typescript example open on pages/index.tsx

Author: TkDodo

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>

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>
+  )
+}